@gcsa/console-styles 0.1.0 → 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 +49 -5
  2. package/package.json +1 -1
  3. package/src/console-ui.css +46 -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,17 +2239,26 @@
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
- padding: var(--gcsa-space-2) 0 var(--gcsa-space-3);
2247
+ gap: 0;
2248
+ height: var(--gcsa-console-header-height);
2249
+ padding: 0;
2231
2250
  }
2232
2251
 
2233
2252
  .gcsa-console-nav--collapsed .gcsa-console-nav__brand-text {
2253
+ flex: 0 0 0;
2254
+ width: 0;
2255
+ min-width: 0;
2234
2256
  max-width: 0;
2257
+ margin: 0;
2258
+ padding: 0;
2259
+ overflow: hidden;
2235
2260
  opacity: 0;
2261
+ pointer-events: none;
2236
2262
  }
2237
2263
 
2238
2264
  .gcsa-console-nav--collapsed .gcsa-console-nav__menu.gcsa-menu--collapsed {
@@ -2271,6 +2297,11 @@
2271
2297
  width: 100%;
2272
2298
  min-height: var(--gcsa-console-header-height);
2273
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;
2274
2305
  }
2275
2306
 
2276
2307
  .gcsa-console-shell__header .gcsa-console-header {
@@ -2278,6 +2309,10 @@
2278
2309
  grid-template-columns: minmax(0, 1fr) auto;
2279
2310
  align-items: center;
2280
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;
2281
2316
  min-height: var(--gcsa-console-header-height);
2282
2317
  padding: 0 var(--gcsa-space-6) 0 0;
2283
2318
  }
@@ -2291,6 +2326,7 @@
2291
2326
  .gcsa-console-shell__header .gcsa-console-header__title-row {
2292
2327
  flex-wrap: nowrap;
2293
2328
  min-width: 0;
2329
+ overflow: hidden;
2294
2330
  }
2295
2331
 
2296
2332
  .gcsa-console-shell__header .gcsa-console-header__title {
@@ -2299,8 +2335,14 @@
2299
2335
  text-overflow: ellipsis;
2300
2336
  white-space: nowrap;
2301
2337
  min-width: 0;
2302
- }
2303
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
+ }
2304
2346
  .gcsa-console-shell__header .gcsa-console-header__actions {
2305
2347
  position: static;
2306
2348
  top: auto;
@@ -2374,6 +2416,8 @@
2374
2416
  align-items: center;
2375
2417
  column-gap: 8px;
2376
2418
  padding: 0 var(--gcsa-space-3) 0 0;
2419
+ height: var(--gcsa-console-header-height);
2420
+ max-height: var(--gcsa-console-header-height);
2377
2421
  min-height: var(--gcsa-console-header-height);
2378
2422
  }
2379
2423
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gcsa/console-styles",
3
- "version": "0.1.0",
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,17 +1862,26 @@
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
- padding: var(--gcsa-space-2) 0 var(--gcsa-space-3);
1870
+ gap: 0;
1871
+ height: var(--gcsa-console-header-height);
1872
+ padding: 0;
1857
1873
  }
1858
1874
 
1859
1875
  .gcsa-console-nav--collapsed .gcsa-console-nav__brand-text {
1876
+ flex: 0 0 0;
1877
+ width: 0;
1878
+ min-width: 0;
1860
1879
  max-width: 0;
1880
+ margin: 0;
1881
+ padding: 0;
1882
+ overflow: hidden;
1861
1883
  opacity: 0;
1884
+ pointer-events: none;
1862
1885
  }
1863
1886
 
1864
1887
  .gcsa-console-nav--collapsed .gcsa-console-nav__menu.gcsa-menu--collapsed {
@@ -1897,6 +1920,11 @@
1897
1920
  width: 100%;
1898
1921
  min-height: var(--gcsa-console-header-height);
1899
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;
1900
1928
  }
1901
1929
 
1902
1930
  .gcsa-console-shell__header .gcsa-console-header {
@@ -1904,6 +1932,10 @@
1904
1932
  grid-template-columns: minmax(0, 1fr) auto;
1905
1933
  align-items: center;
1906
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;
1907
1939
  min-height: var(--gcsa-console-header-height);
1908
1940
  padding: 0 var(--gcsa-space-6) 0 0;
1909
1941
  }
@@ -1917,6 +1949,7 @@
1917
1949
  .gcsa-console-shell__header .gcsa-console-header__title-row {
1918
1950
  flex-wrap: nowrap;
1919
1951
  min-width: 0;
1952
+ overflow: hidden;
1920
1953
  }
1921
1954
 
1922
1955
  .gcsa-console-shell__header .gcsa-console-header__title {
@@ -1925,8 +1958,14 @@
1925
1958
  text-overflow: ellipsis;
1926
1959
  white-space: nowrap;
1927
1960
  min-width: 0;
1928
- }
1929
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
+ }
1930
1969
  .gcsa-console-shell__header .gcsa-console-header__actions {
1931
1970
  position: static;
1932
1971
  top: auto;
@@ -2000,6 +2039,8 @@
2000
2039
  align-items: center;
2001
2040
  column-gap: 8px;
2002
2041
  padding: 0 var(--gcsa-space-3) 0 0;
2042
+ height: var(--gcsa-console-header-height);
2043
+ max-height: var(--gcsa-console-header-height);
2003
2044
  min-height: var(--gcsa-console-header-height);
2004
2045
  }
2005
2046