diff options
| author | Darin Dimitroff <d@thecrazyones.agency> | 2017-01-02 16:09:21 +0200 |
|---|---|---|
| committer | Darin Dimitroff <d@thecrazyones.agency> | 2017-01-02 16:09:21 +0200 |
| commit | 20d33818a838a7c022456d5620d255283531ba97 (patch) | |
| tree | 7ea19ac7b847c10f2783a5b50f956f1e3ed5cbd6 /src/css/imports/_border-radius.css | |
| parent | 4ad2ee71fbecb4dcef47319e3cbbe18b57cd1c61 (diff) | |
WIP
Diffstat (limited to 'src/css/imports/_border-radius.css')
| -rwxr-xr-x | src/css/imports/_border-radius.css | 190 |
1 files changed, 80 insertions, 110 deletions
diff --git a/src/css/imports/_border-radius.css b/src/css/imports/_border-radius.css index 2422bd2..8cde05d 100755 --- a/src/css/imports/_border-radius.css +++ b/src/css/imports/_border-radius.css @@ -1,119 +1,89 @@ -/* - - BORDER RADIUS - Docs: http://tachyons.io/docs/themes/border-radius/ - - Base: - br = border-radius - - Modifiers: - 0 = 0/none - 1 = 1st step in scale - 2 = 2nd step in scale - 3 = 3rd step in scale - 4 = 4th step in scale - - Literal values: - -100 = 100% - -pill = 9999px - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - - :root { - --border-radius: .25rem; - } - - .br0 { border-radius: 0; } - .br1 { border-radius: var(--border-radius); } - .br-100 { border-radius: 100%; } - .br-pill { border-radius: 9999px; } - .br--bottom { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - .br--top { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .br--right { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .br--left { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } +.br0 { border-radius: 0!important; } +.br1 { border-radius: var(--border-radius); } +.br-100 { border-radius: 100%; } +.br-pill { border-radius: 9999px; } +.br--bottom { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.br--top { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.br--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.br--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} @media (--breakpoint-not-small) { - .br0-ns { border-radius: 0; } - .br1-ns { border-radius: var(--border-radius); } - .br-100-ns { border-radius: 100%; } - .br-pill-ns { border-radius: 9999px; } - .br--bottom-ns { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - .br--top-ns { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .br--right-ns { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .br--left-ns { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } +.br0-ns { border-radius: 0; } +.br1-ns { border-radius: var(--border-radius); } +.br-100-ns { border-radius: 100%; } +.br-pill-ns { border-radius: 9999px; } +.br--bottom-ns { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.br--top-ns { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.br--right-ns { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.br--left-ns { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} } @media (--breakpoint-medium) { - .br0-m { border-radius: 0; } - .br1-m { border-radius: var(--border-radius); } - .br-100-m { border-radius: 100%; } - .br-pill-m { border-radius: 9999px; } - .br--bottom-m { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - .br--top-m { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .br--right-m { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .br--left-m { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } +.br0-m { border-radius: 0; } +.br1-m { border-radius: var(--border-radius); } +.br-100-m { border-radius: 100%; } +.br-pill-m { border-radius: 9999px; } +.br--bottom-m { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.br--top-m { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.br--right-m { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.br--left-m { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} } @media (--breakpoint-large) { - .br0-l { border-radius: 0; } - .br1-l { border-radius: var(--border-radius); } - .br-100-l { border-radius: 100%; } - .br-pill-l { border-radius: 9999px; } - .br--bottom-l { - border-radius-top-left: 0; - border-radius-top-right: 0; - } - .br--top-l { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .br--right-l { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .br--left-l { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } +.br0-l { border-radius: 0; } +.br1-l { border-radius: var(--border-radius); } +.br-100-l { border-radius: 100%; } +.br-pill-l { border-radius: 9999px; } +.br--bottom-l { + border-radius-top-left: 0; + border-radius-top-right: 0; +} +.br--top-l { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.br--right-l { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.br--left-l { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} } |
