Skip to content

Releases: teacat/tocas

Tocas 5.0.1

05 Jul 00:30
@YamiOdymel YamiOdymel
5.0.1
0bb185e
This commit was signed with the committer’s verified signature.
YamiOdymel Yami Odymel
GPG key ID: 68E469836934DB36
Learn about vigilant mode.
Compare
Choose a tag to compare
Tocas 5.0.1 Latest
Latest

修正

  • [Icons] cdnjs 沒有快取到 FontAwesome 而導致圖示無法顯示的問題 💀 (0bb185e)
Assets 2
Loading

Tocas 5.0.0

04 Jul 05:17
@YamiOdymel YamiOdymel
5.0.0
7f118f0
This commit was signed with the committer’s verified signature.
YamiOdymel Yami Odymel
GPG key ID: 68E469836934DB36
Learn about vigilant mode.
Compare
Choose a tag to compare
Tocas 5.0.0

儘管 Tocas 5.0 與 4.2.5 大部分相同，但有些元件被移除或是改變用法。
文件網址 https://tocas-ui.com/5.0/zh-tw/index.html

⚠️ 破壞性異動 ⚠️

  • 包含所有 4.2.5 之前的破壞性變更，請檢視先前的歷史更新，往前追溯
  • [Segment] 元件被移除，請使用 .ts-box 與 .ts-content (#997)
  • [Avatar] 元件被移除，請使用 .ts-image 自訂尺寸 (#1029)
  • [Placeholder] 元件被移除，建議使用 .ts-loader 載入指示器 (#1040)
  • [Button, Input, Chip, Selection] .is-disabled 樣式改為 [disabled] 標籤，除非是連結 (#960, #980)
  • [Image] 移除所有尺寸樣式，現在必須自己指定 width 與 height (#959, #989)
  • [Modal, AppDrawer] 必須使用 <dialog> 原生標籤 (#946)
  • [Dropdown, Tab] 模組不再使用 [data-name]，而是基於元素的 id (#971)
  • [Tab] .is-indicated 改名為 .is-short-indicated 與 .is-very-short-indicated (#972)
  • [Dropdown] 項目標題從 .item.is-header 簡化為 .header (#1007)
  • [Dropdown] 移除 .is-large 與 .is-small 尺寸樣式，現在統一規格 (#981)
  • [Box] .is-squared 改名為 .is-sharp (5348046)
  • [Box] .is-elevated 改名為 .is-raised (#1041)
  • [Box] .is-left/right-indicated 樣式改為 .is-start/end-indicated (#996)
  • [AppDrawer] 方向樣式從 .is-left/right 改為 .is-start/end
  • [Utilities] 色系輔助樣式 .has-light/dark-hidden 改為 .has-hidden-light/dark (#1015)
  • 所有的東西不再是預設 position: relative (#978. #977)

修正

  • [Modal] 修正 Tooltip 的相關 z-index 層級覆蓋問題 (#953)
  • [App Topbar] 修正文字在 Firefox 上因為 line-height 而被裁切的問題 (#948)
  • [Wrap] 修正使用 .is-vertical 時，導致內部元素被拉伸的問題 (#944)
  • [Control] 修正在內部擺放 ts-select 或 ts-input 造成的樣式問題 (#920, #956)
  • [Button] 移除套用 .is-disabled 卻不會被觸發的 cursor: not-allowed 樣式 (#950)
  • [Pagination] 修正頁數與文字上下不對齊 (#1005)
  • [Content] 互動的 .is-interactive 樣式現在是 100% 全寬 (#1010)
  • [Select] 修正文字在 .is-basic 會被裁切的問題 (#1038)
  • 修正暗黑色系前景、背景相反的問題 (#909)

修改

  • [Tooltip] 改用系統原生的 Popover API 作為基底 (bc093bb)
  • [Button] 圖示按鈕 .is-icon 的比例現在一定會是 1:1 正方形 (#968)
  • [Flag] 國旗現在可以自由地變更寬度 (#964)
  • [Select] 不再需要手動指定 .is-multiple 多選樣式，現在透過 :has([multiple]) 自動偵測 (#973)
  • [Dropdown] 增加內距，令其看起來更輕鬆 (#982, 757d33b)
  • [Dropdown] 展開時的預設 [data-position] 位置現在改為 bottom-start (#984)
  • [Dropdown] 現在有預設的最小寬度 10rem (#984)
  • [Dropdown] 重新設計 .header 的標題項目樣式 (#985)
  • [Dropdown] 自動依據畫面剩餘的空間調整高度(#986)
  • [Text] 將 .is-editable 文字樣式顏色改得更深 (1d93100)
  • [Box] .is-indicated 邊框變得更厚了 (#1002)
  • [Image] .is-1-by-1 這種長寬比樣式的圖片現在會自動套用 .is-covered 樣式 (#1011)
  • <form> 元素現在是 display: contents 這樣就不會影響某些樣式 (#1036)
  • <body> 改為 display: table-cell 以符合某些內容溢出捲動的情境 (ff22c1c)
  • FontAwesome 更新至 6.5.2 (46203e4)

新增

  • [Pagination] 新增 .is-outlined 外框線樣式 (#939, #969)
  • [Pagination] 新增 .is-relaxed 寬鬆樣式 (#940)
  • [Button] 新增 .is-negative + .is-secondary 負面次要樣式 (#957)
  • [AppDrawer] 新增 --width 變更抽屜寬度 (26816db)
  • [Modal] 新增 --width 變更視窗寬度 (9397cec)
  • [Grid, Wrap] 新增 --gap 變更欄位間隔 (#962)
  • [Tooltip] 新增 [data-html="true"] 可以讓工具提示使用 HTML 內容 (#976)
  • [Tooltip] 新增 [data-trigger="focus"] 可以在元素取得焦點時觸發工具提示 (#961)
  • [Dropdown] 新增 .is-indented 縮排項目 (#987)
  • [Popover] 全新的 Popover 元件 (#970)
  • [Text] 新增 .is-icon-link 樣式可以在文字旁邊擺放圖示且有基本間距 (#988)
  • [Snackbar] 新增 .close 關閉按鈕 (#990)
  • [Modal, AppDrawer] 新增 .is-fullscreen 的全螢幕樣式，可以用於手機上 (#995, #1000)
  • [Drawer] 新增 .is-modal 樣式能看起來像快顯視窗 (#996)
  • [Container] 容器現在可以使用 --width 來自定寬度 (60d804f)
  • [Container] 透過 --gap 微調距離螢幕邊緣的空白 (#1016)
  • [Dropdown] 現在有了 .divider 分隔線項目，不再需要 .ts-divider 了 (#1006)
  • [Mask] 新增 .is-centered 可以置中內容而不再需要 .ts-center (#1012)
  • [Icon] 新增 .is-flipped 等翻轉、旋轉樣式 (#1013)
  • [Button, File, Selection] 新增 .is-relaxed 寬鬆樣式 (#1018, #1020, #1022)
  • [Tab] 新增 .is-highlighted 可以只醒目顯示正在啟用的項目並淡化其他項目 (#1028)
  • [Input] 讓 Textarea 支援 .is-basic 基本樣式 (#1030)
  • [List] 透過 --gap 調整項目之間的間距 (#1027)
  • [Table] thead, tbody 和 tfoot 可以使用 th 來粗體化文字 (#1033)
  • [AppCenter] 原先的 .ts-center 改為 .ts-app-center 加回來了 (f18876d, #945)
  • [Fieldset] 新增了 [disabled] 樣式
  • 新增 .is-rounded 與 .is-sharp 來變更全域圓角設定 (#933, #994)
Assets 2
Loading

Tocas 4.2.5

05 Sep 21:23
@YamiOdymel YamiOdymel
4.2.5
2779e2b
This commit was signed with the committer’s verified signature.
YamiOdymel Yami Odymel
GPG key ID: 68E469836934DB36
Learn about vigilant mode.
Compare
Choose a tag to compare
Tocas 4.2.5

⚠️ 破壞性異動 ⚠️

這些破壞性異動仍可以繼續在 4.2.5 版本中正常使用，下一個 4.3.0 版本將會全數移除，請盡快改為新用法。這些樣式被移至 /src/deprecated_431.css。

  • [Center] Center 元件被廢除，請改用輔助樣式的 has-flex-center 與 has-full-size (#921, 7ef743f)。
  • [Utilities] 所有的輔助樣式從 u- 前輟改為 has- (#935, 7d1e502)。

修正

  • [Grid] 使用 is-stacked 的時候會導致子 Grid 也被 Stack (#926, ed3658a)。
  • [Grid] 使用 is-stacked 和 is-reversed 不起作用 (#927, 5de2be9)。
  • [Rating] Firefox 尚未支援 :has 選擇器而導致 is-active 顏色不起作用 (#924, 6bdbfb1)。
  • [Divider] is-vertical 的分隔線會因為指定 height: 100% 而不在 Flexbox 生效 (#923, 95f6fde)。
  • [Control] is-stacked 的時候 Firefox 會因為 overflow: hidden 而裁切較矮 line-height 的文字 (#925, 4fa65ef)。
  • is-light 的時候，連結顏色仍然會受到系統暗黑主題的影響而改變顏色 (#928, ae3dd6d)。

修改

  • [Text] is-x-lines 使用 word-break: break-all 來避免只呈現一個單字 (#929, 60631e0)。
  • [Header] 帶有圖示的標題大小從 1.5em 降低為 1.25em (#922, dd5b5d2)。
  • FontAwesome 更新到 6.4.2 (#932, 00af503)。

新增

  • [Tab] 新增 is-indicated 的短點指示樣式 (#937, a9568d3)。
  • [Tab] 新增 is-tall 的樣式能讓項目的上下更高一點，距離指示器更寬鬆 (#938, 485198d)。
  • 新增多個 has- 輔助樣式，如 has-leading-none 改變行距高度。
Assets 2
Loading

Tocas 4.2.4

24 Jun 13:49
@YamiOdymel YamiOdymel
4.2.4
536f885
This commit was signed with the committer’s verified signature.
YamiOdymel Yami Odymel
GPG key ID: 68E469836934DB36
Learn about vigilant mode.
Compare
Choose a tag to compare
Tocas 4.2.4

⚠️ 破壞性異動 ⚠️

這些破壞性異動仍可以繼續在 4.2.4 版本中正常使用，但在未來的版本可能隨時都會被移除，請盡快改為新用法。這些樣式被移至 /src/deprecated_423.css 跟 /src/deprecated_430.css。

  • [Row] Row 元件被廢除，請改用 Grid (#913, 93b757d)。
  • [Space] Space 元件被廢除，請改用輔助樣式的 u-spaced 與 u-padded (#914, 93b757d)。

新元件

  • [Blankslate] 空白預置區塊，在沒有項目的情況下提供使用者一個預設的行為或提示 (9cb08f8)。

修正

  • [App Topbar] 修正文字頂部被裁切的問題 (#908, 2bcf4e3)。
  • [Flag] 使國旗的邊框以透明方式呈現，這樣邊框就不會在有底色的元素上過於明顯 (#917, 36b9bc0)。

修改

  • [Button] is-large 的按鈕文字大小從 17px 降為 16px (#911, 9e9b221)。
  • [App Layout] is-full 的填滿尺寸從 100% 改為 100vw 與 100vh (3e46cf8)。
  • [Breadcrumb] 項目底限的效果現在只在 a 標籤上生效 (f76de07)。

新增

  • [Table] 新增了 is-compact 來縮短左右水平密度 (72bd664)。
  • [Header] 新增了 is-tight 來減少 line-height 讓文字換行更緊湊 (#910, f98f567, 648b2cc)。
  • [Grid] 新增了 is-stretched 來延展每個欄位的子元素高度，讓所有元素同高 (1a2a929)。
  • [Pagination] 新增 is-first 與 is-last 來表示第一或最後一頁按鈕 (2fd7d79。
  • [Text] 新增了 is-justified-aligned 來均衡對齊文字，感謝 @KageRyo (86b50d7)。
  • [Pagination] 新增 is-skipped 來透過 ... 表示被省略的頁面 (d49cb16)。
  • [Select] 新增 is-relaxed 呈現上下更寬鬆的下拉式選擇欄位 (1797160)。
  • u-spaced 和 u-padded 輔助樣式更多元 (2753d10)。

Contributors

KageRyo
Assets 2
Loading

Tocas 4.2.3

08 Mar 03:37
@YamiOdymel YamiOdymel
4.2.3
1782069
This commit was signed with the committer’s verified signature.
YamiOdymel Yami Odymel
GPG key ID: 68E469836934DB36
Learn about vigilant mode.
Compare
Choose a tag to compare
Tocas 4.2.3

修正

  • 避免 Tocas 重複監聽被重複渲染的元素 (#907, 1782069)。

修改

  • [Tooltip] 暫時移除 Tooltip 避免撞到邊緣的外距間隔，主要是計算問題會有偏移 (fd31b2f)。
Assets 2
Loading

Tocas 4.2.2

04 Mar 16:53
@YamiOdymel YamiOdymel
4.2.2
b6ebb34
This commit was signed with the committer’s verified signature.
YamiOdymel Yami Odymel
GPG key ID: 68E469836934DB36
Learn about vigilant mode.
Compare
Choose a tag to compare
Tocas 4.2.2

修正

  • 移除先前修正 MutationObserver 忘記移除 characterData: true 的多餘監聽 (a54d0cf)。
Assets 2
Loading

Tocas 4.2.1

04 Mar 16:30
@YamiOdymel YamiOdymel
4.2.1
2f08390
This commit was signed with the committer’s verified signature.
YamiOdymel Yami Odymel
GPG key ID: 68E469836934DB36
Learn about vigilant mode.
Compare
Choose a tag to compare
Tocas 4.2.1

修正

  • 修正 Vue.js 因為使用非正規 DOM 編輯方式而導致 Tocas JS 無法使用 MutationObserver 監聽的問題 (821d90e)。

新增

  • [Grid] column 新增了 is-center-aligned 可以讓欄位成為 display: flex; 並置中內容 (a5f9fef)。
  • 對 <html> 新增 is-medium 來將字體大小改為 15px，這是預設值通常不需要特別套用 (9d41aa5)。
Assets 2
Loading

Tocas 4.2.0

03 Mar 11:23
@YamiOdymel YamiOdymel
4.2.0
f828912
This commit was signed with the committer’s verified signature.
YamiOdymel Yami Odymel
GPG key ID: 68E469836934DB36
Learn about vigilant mode.
Compare
Choose a tag to compare
Tocas 4.2.0

⚠️ 破壞性異動 ⚠️

這些破壞性異動仍可以繼續在 4.2.0 版本中正常使用，但在未來的版本可能隨時都會被移除，請盡快改為新用法。這些樣式被移至 /src/deprecated_420.css。

  • [Accordion] 改為使用 HTML 原生的 <details> 標籤 (#882, ab82979)。
  • [Grid] 多項功能被移除：is-doubling、is-stackable，請透過新的響應式系統搭配 is-x-columns 跟 is-stacked 使用。
  • HTML 的 [data-scale] 與 [data-scheme] 改為 is- 用法（如：is-small 跟 is-dark） (#896)。
  • 舊有的響應式系統完全重構，如 is-minimal-x, is-standard-x, is-maximal-x 都不再支援（包含網格系統的 is-minimal-5 用法…等），請使用新的響應式系統。
  • is-dark, is-light, is-inverted 都改為 u- 前輟，如：u-dark。
  • is-dark-only, is-light-only 改為 u-dark-hidden 跟 u-light-hidden 而且作用相反，需要額外注意。

新元件

  • [App Drawer] 可以讓左、右、下出現置頂的抽屜 (58f5631)。
  • [App Topbar] 可以呈現像應用程式那樣的頂部按鈕列 (5f2d867)。
  • [Timeline] 能以時間軸的方式陳列事情發生的經過 (70b8982)。
  • [Buttons] 新的按鈕群組，用以呈現類似 Split Button 樣式，可以讓按鈕旁邊緊鄰另一個按鈕 (#865, 92eb54b)。
  • 新增數個 JavaScript 模組：Dropdown, Tooltip, Toggle, Tab。

修正

  • [App Layout] 每個 .cell 現在都是 overflow: auto 來修正會在容器異常 Scrollable 的問題 (#900, a273064)。
  • [Procedure] 因為多行文字而造成 .indicator 扁掉的問題 (#883, f334bd7)。
  • [Dropdown] 修正 Dropdown 的 z-index 穿透更上層的 Modal 問題 (#853, 119054a)。
  • [Button] 修正帶有 is-large 的 Icon 在 is-labeled-icon 按鈕會不成比例的 em 問題 (#849, ccdd4a7)。
  • [Button] is-loading 會因為帶有 is-labeled-icon 樣式而看起來很奇怪 (#850, f72b9b7)。
  • [Button] 修正 is-ghost 的 Loading 顏色 (#868, f00c809)。
  • [Select] 項目的圖示大小跟 Dropdown 的 1.1em 不相符而看起來不對齊 (#857, dda2048)。
  • [Select] is-solid 會因為 CSS 優先順序而永遠無法套用 is-acitve 樣式的問題 (#858, dda2048)。
  • [Icon] 圖示的 z-index 會突破 Mask (#876, 0fdaaf6)。
  • [Tab] Item 裡面的文字與圖示現在會上下垂直置中避免跑位 (#864, e8838a2)。
  • [Tab] 修正 Item 若是 <button> 則會跑位的問題 (#859, 4c075cd)。
  • is-dark-only 原本只會相依使用者裝置的 color-scheme 但卻忽略了套用 is-dark 元素的條件 (#888, 95772e3)。

修改

  • [Procedure] 簡化結構，已經不再需要 .line 元素 (#899, 79ec645)。
  • [Dropdown] 項目套用 min-width: 0 來支援 text-overflow (3643801)。
  • [Dropdown] 項目裡的 Avatar 會有負外距來讓對齊看起來更整齊 (#854, 49c49cb)。
  • [Imageset] is-portrait 因為人像重點通常在上面，現在預設會以置上裁切為主 (#862, 2d3616f)。
  • [Imageset] is-portrait 左側欄位為了更妥善地呈現主體照片，比起右側欄位會有更大的佔比 (#860, 2d3616f)。
  • [Button] is-labeled-icon 裡的圖示現在會以 1.2em 大一點的尺寸顯示 (f69ce39)。
  • [Table] 調整了 <td> 的 is-padded 樣式相關內距 (8e05327)。
  • [Grid] 已經不再使用 display: grid 並改回使用 display: flex (cf9ff32)。
  • [File] 現在也跟其他 Input 一樣預設都是 100% 流動寬度 (#871, 90e1256)。
  • [Text] 沒有公開的 is-x-lines 的 is-1-line 改為複數的 is-1-lines (fa0f323)。
  • [Tab] 圖示現在是 1.1em 尺寸，變得更大一點了 (4c075cd)。
  • 移除了英文版本的文件，因為目前沒時間維護 (36a69c4)。
  • 更新到 FontAwesome 6.3.0 (3362365)。

新增

  • [Checklist] 新增了 is-info 跟 is-warning 的項目用來呈現資訊與警告項目 (#890, a40b794)。
  • [Container] 新增 is-padded 和 is-fitted 來變更內距大小，很適合響應式設計在行動裝置上減小內距 (#893, 1581215)。
  • [Dropdown] 新增 is-top-center 跟 is-bottom-center 來置中上下邊的選單 (#855, 3e8675e)。
  • [Control] 新的 is-stacked 可以搭配響應式設計在行動裝置上層疊 (#845, 715a4c0)。
  • [Loading] 可以水平置中的 is-centered (2eb22eb)。
  • [Content] 現在可以上下或左右單獨使用 is-fitted (d0aaa50)。
  • [Header] 現在和 Text 一樣有了 is-lowercased 與 is-uppercased 可以強制英文字母大小寫 (#878, 15a659c)。
  • [Rating] 現在支援 is-input 來讓使用者可以透過 checkbox 評分了 (#881, f3ad84b)。
  • [Button] 因為 is-secondary 按鈕在 is-secondary Content 上會不太明顯，所以新增一個 is-tertiary 樣式來暫時解決這個問題 (#810, f72b9b7)。
  • [Select] 透過 is-multiple 來使用複選的 [multiple] (#884, 01955e9)。
  • [Table] 新的 is-fitted 無內距的樣式 (#874, 8a5d2d0)。
  • [Input] 新增 is-relaxed 可以讓高度更高來呈現較寬鬆的模樣 (8784caa)。
  • [Close] 新增一個更大的 is-big 尺寸 (#851, 07726d7)。
  • [Close] 新的 is-rounded 正圓角樣式 (#852, 07726d7)。
  • [Flag] 新增 is-zz-flag 或 is-unknown-flag 來代表未知的國旗 (#875, 23a8a1b)。
  • [Grid] 新的 is-1-columns 來呈現只有一欄的欄位，通常用於響應式設計在 is-x-columns 之間切換 (#891, 73144d8)。
  • [Grid] 新增 is-reversed, is-stacked 和 is-order-x (e3f597e)。
  • [Menu] 現在也支援 is-horizontally-padded 來增加項目的內距 (#869, 722c580)。
  • Switch, Checkbox 跟 Radio 現在有 is-solo 樣式可以用來呈現沒有文字只有開關的模樣 (#833, 7ed49f3)。
  • 未公開的 Tocas Email 元件，可以檢視 /examples/email 先行預覽 (#866, fa1c2ae)。
  • 大部分的元件現已支援 Accent Color 領銜主色，可以替元件加上主要色系 (e56c86b)。
  • 全新的響應式系統可以透過 中斷點:樣式 來更加彈性地切換樣式 (#894)。

筆記

Grid 已經不再是 display: grid 並改回使用 display: flex (cf9ff32)。

Tocas 4 試圖在 Grid 元件使用 display: grid 來取代 Tocas 2 時的 display: flex 設計，結果不僅沒有變得更彈性，反而更加地綁手綁腳了。

舉例來說，沒有辦法像 Flexbox 那樣反轉欄位順序或是填滿剩餘空間；即便有，也沒有辦法自動將欄位換到下一列。

總之，display: grid 更像是給已經有一個排版設計的網頁使用，現在改回 Flexbox 設計之後，Tocas Grid 現在也多了幾項功能（例如：is-reversed 跟 is-order-x）。

Accordion 改用 <details> (#882, ab82979)。

正如 #882 說的那樣，使用者可以自行使用 .ts-row 來得到近似原本的設計，現在改為使用 HTML 原生的 <details> 可以更快地擁有一個簡易可折疊內容的功能。

基於 JavaScript 的全新的響應式系統 (#894)。

原先 Tocas 4 試圖簡化響應式設計系統，使用 CSS 來將介面劃分為 minimal、standard 和 maximal，希望使用者能以最小化、標準、最大化來決定介面上應該要有哪些元素。

但很快地這個系統並不可靠，主要的問題有這幾項：

  1. 依靠視窗寬度來決定元素的斷點實在是太過無用，例如：頁面上已經變得很擁擠，卻因為視窗還是很寬而無法觸發 CSS 的中斷點設定。
  2. 使用者可能有自訂樣式想要在行動裝置使用，但是要跟 Tocas UI 的中斷點同時觸發，就還要跑來看原始碼複製裝置中斷點的定義，實在太過繁瑣。
  3. 中斷點的定義寫死在 Tocas CSS 裡而不能自行修改，因為 Media Query 不支援從 CSS Variables 裡面讀取。
  4. 每個中斷點都要有重複的樣式，一個樣式如果有四個中斷點，就要重複寫四次。

在思考後，決定使用類似 Tailwind 那樣的 mobile:is-small 定義，但因為 Tocas 沒有編譯器，因此以 JavaScript 搭配 Mutation Observer 作為基礎系統。現在搭配 Tocas JS，可以透過 CSS Variable 定義中斷點，甚至還支援 Container Query，也可以使用中斷點來切換自己的樣式。

全域樣式 Utilities 系統 (0510e8e)。

全域樣式可以在任何元素上使用（甚至不是 Tocas UI 的元件），例如：想要隱藏某些元素，就勢必要有一個 is-hidden 樣式。

起初的前輟是 has- 但某些命名仍不太符合文法（如：has-dark、has-hidden），所以決定改為 u- 前輟。

Assets 2
Loading

Tocas 4.1.0

26 Sep 14:06
@YamiOdymel YamiOdymel
4.1.0
ece5d8e
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
Tocas 4.1.0

修正

  1. 修正 Input 無法在 iOS 上輸入的錯誤 (#826, 57a9d0c)。
  2. Button 的 is-ghost 無法與 is-negative 語意搭配使用的問題 (#827, 3831d32)。
  3. 讓 Circular Icon Button 為正圓形 (acc5ffc)。
  4. 修正 Imageset 的高度問題，同時修正 is-circular 圓角不正確的問題 (#832, f4ea2e0)。
  5. 修正響應式不在 768px 斷點生效的問題 (#823, 3db2399)。

修改

  1. 修改 CSS 樣式順序讓 is-padded 可以在套用 is-dense 的 Table 上生效 (fa394d7)。
  2. 降低 Tocas UI 對於連結顏色修改的 CSS 選擇器權重 (84cfe83)。
  3. Notice 改用 block 讓容器過短時能讓文字與標題以更好地方式呈現 (#808, 3be8611)。
  4. 將所有的按鈕、輸入欄位、下拉選單高度標準化 (#829, 4eeb083)。
  5. 所有的文字輸入欄位現在都是流動寬度 (#842, 27cd2ae)。
  6. 升級到 Font Awesome 6.2.0 (0150d57)。

新增

  1. 新樣式供 Procedure 元件的步驟在標記為完成 is-completed 時，線條可以是一半 is-half (384e431)。
  2. 對 Input 為 [type="color"] 樣式支援 (14151f3)。
  3. Progress 現在有 is-empty 可以在沒有進度時隱藏進度條 (#820, 76d6991)。
  4. 將 Dropdown 從 Menu 中拆出來成為一個獨立的元件 (#837, #819, a0156fe)。

文件

  1. 更新箱型容器部份的圖片範例原始碼 (#834, f802dfc)。
  2. 提昇小部份 A11y 國際規範格式 (#838, 1f6778e)。
Assets 2
Loading

Tocas 4.0.4

22 May 04:37
@YamiOdymel YamiOdymel
4.0.4
18b8c84
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
Tocas 4.0.4

修正

  1. 暗色主題下的捲軸現在也會是暗色了 (#802, 30283e2)。
  2. 修正 Grid 網格系統在過小時會 Overflow，因為其欄位不能小於 Gap 間隙的問題 (#814, 7b03585)。
  3. 讓連結在暗色主題更加顯眼 (#812, c683663)。
  4. 讓 Date Input 在 iOS Safari 下有預設基本高度避免太扁 (#804, f168ca1)。
  5. 解決 Row 和 Grid 在 Menu 裡成為 Item 時不會自動延展寬度的問題 (#817, b550a7d)。

修改

  1. 移除重複的 Font Family，感謝 @Sea-n (#800, 763a3fc)。
  2. Menu 的 is-dropdown 和 is-separated 搭配使用時，左右現在也會有邊距而不會貼邊 (91b8896)。
  3. Input Chip 現在如果有帶圖示，核取時會直接將圖示變為打勾圖示而不是多放一個打勾在旁邊 (7ec9655)。
  4. Box 如果為虛無 is-hollowed 樣式，現在背景色會是透明的 (e0d1510)。

新增

  1. 仍在測試的 Tooltip 元件 (4893f74)。
  2. Segment 現在也有文字對齊，如：is-start-aligned (ca0076c)。
  3. Tab 現在有 is-relaxed 寬鬆樣式能讓項目的水平內距變得更大 (e097276)。

文件

  1. 修正 Github 大小寫為 GitHub，感謝 @Sea-n (#801, ce4c436)。
  2. 修正 is-16-by-19 的長寬比錯字，應為 is-16-by-9 (#806, de7eead)。
  3. 降低範例圖片的解析度與壓縮 (#805, 08afffb)。
  4. 讓文件在選取反白 <mark> 的部份變得更加顯眼 (#816, b8880af)

Contributors

Sea-n
Assets 2
Loading