diff --git a/client/index.html b/client/index.html index aa4c700..7bc0488 100644 --- a/client/index.html +++ b/client/index.html @@ -18,4 +18,4 @@ gtag('js', new Date()); gtag('config', 'UA-139616701-3'); - + \ No newline at end of file diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx index 04c8cae..d7aa50d 100644 --- a/client/layouts/DetailsLayout.tsx +++ b/client/layouts/DetailsLayout.tsx @@ -20,8 +20,7 @@ interface DetailsLayoutProps { const DetailsLayout: React.FC = ({ pattern, children }) => { useDocumentTitle(`CSS Layout ∙ ${pattern}`); - - const products = randomItems(ProductList, 3); + const products = React.useMemo(() => randomItems(ProductList, 3), []); return ( diff --git a/client/patterns/accordion/Details.tsx b/client/patterns/accordion/Details.tsx index 0bd314d..0903b21 100644 --- a/client/patterns/accordion/Details.tsx +++ b/client/patterns/accordion/Details.tsx @@ -64,89 +64,24 @@ const Details: React.FC<{}> = () => {
-
-
} - > -
- -
} - > -
- - } - > -
- - - - )} - source={` +html={` -
+
-
+
-
+
-
...
+
...
-
+
...
-
+
...
@@ -155,7 +90,86 @@ const Details: React.FC<{}> = () => { ...
`} - /> +css={` +.container { + /* Border */ + border: 1px solid rgba(0, 0, 0, 0.3); + border-bottom-color: transparent; + border-radius: 4px; +} + +.item { + border-bottom: 1px solid rgba(0, 0, 0, 0.3); +} + +.header { + /* Center the content horizontally */ + align-items: center; + display: flex; + + cursor: pointer; + padding: 16px; +} +.toggle { + margin-right: 12px; +} +.title { + /* Take remaining width */ + flex: 1; +} + +.content { + /* For not selected item */ + display: none; + + border-top: 1px solid rgba(0, 0, 0, 0.3); + padding: 16px; +} +.content.selected { + /* For selected item */ + display: block; +} +`} + > +
+
+
} + > +
+ +
} + > +
+ +
} + > +
+ +
+
+
diff --git a/client/patterns/arrow-buttons/Details.tsx b/client/patterns/arrow-buttons/Details.tsx index 3fdc596..779da39 100644 --- a/client/patterns/arrow-buttons/Details.tsx +++ b/client/patterns/arrow-buttons/Details.tsx @@ -20,151 +20,7 @@ const Details: React.FC<{}> = () => {
-
-
- -
-
- -
-
- -
-
- -
-
-
- )} - source={` +html={`
`} - /> +css={``} + > +
+
+
+
+
+
+5
+
+ = () => {
-
- - - -
-
- )} - source={` +html={`
+ + +
+ + diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx index 025df0a..9d853f7 100644 --- a/client/patterns/badge/Details.tsx +++ b/client/patterns/badge/Details.tsx @@ -20,36 +20,7 @@ const Details: React.FC<{}> = () => {
-
- 1 -
-
- )} - source={` +html={`
+html={` +
... -
/
+
/
...
`} - /> +css={` +.container { + /* Content is centered vertically */ + align-items: center; + display: flex; +} +.separator { + margin: 0 8px; +} +`} + > +
+
+
+
/
+
+
/
+
+
/
+
+
+
+
); diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx index c47699a..a5f7f13 100644 --- a/client/patterns/button-with-icon/Details.tsx +++ b/client/patterns/button-with-icon/Details.tsx @@ -21,43 +21,8 @@ const Details: React.FC<{}> = () => {
-
- -
-
- )} - source={` - + + + ); diff --git a/client/patterns/card-layout/Details.tsx b/client/patterns/card-layout/Details.tsx index 2120845..b902871 100644 --- a/client/patterns/card-layout/Details.tsx +++ b/client/patterns/card-layout/Details.tsx @@ -21,55 +21,10 @@ const Details: React.FC<{}> = () => {
-
- { - Array(10).fill(0).map((_, index) => { - return ( -
- -
- ); - }) - } -
-
- )} - source={` -
+html={` +
-
+
...
@@ -77,7 +32,55 @@ const Details: React.FC<{}> = () => { ...
`} - /> +css={` +.container { + display: flex; + + /* Put a card in the next row when previous cards take all width */ + flex-wrap: wrap; + + margin-left: -8px; + margin-right: -8px; +} +.card { + /* There will be 4 cards per row */ + flex-basis: 25%; + + padding-left: 8px; + padding-right: 8px; +} +`} + > +
+
+ { + Array(10).fill(0).map((_, index) => { + return ( +
+ +
+ ); + }) + } +
+
+
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx index 0cc6ba1..c504f95 100644 --- a/client/patterns/card/Details.tsx +++ b/client/patterns/card/Details.tsx @@ -22,37 +22,7 @@ const Details: React.FC<{}> = () => {
-
- -
-
-
- -
-
-
-
- )} - source={` +html={`
= () => { ...
`} - /> +css={``} + > +
+ +
+
+
+
+
); diff --git a/client/patterns/chip/Details.tsx b/client/patterns/chip/Details.tsx index b37db84..dcbfa90 100644 --- a/client/patterns/chip/Details.tsx +++ b/client/patterns/chip/Details.tsx @@ -25,21 +25,20 @@ const Details: React.FC<{}> = () => { You can use a close button to remove a chip. - CSS - - )} - source={` -
+ +
+ ... +
+ + + + ... +
+`} +css={` +.chip { /* Center the content */ align-items: center; display: inline-flex; @@ -53,18 +52,25 @@ const Details: React.FC<{}> = () => { /* Spacing */ padding: 4px 8px; -"> - -
- ... -
+} - - - ... - +.chip__content { + margin-right: 4px; +} `} - /> + > +
+ CSS +
+ diff --git a/client/patterns/circular-navigation/Details.tsx b/client/patterns/circular-navigation/Details.tsx index 31d290f..4249049 100644 --- a/client/patterns/circular-navigation/Details.tsx +++ b/client/patterns/circular-navigation/Details.tsx @@ -56,74 +56,15 @@ const Details: React.FC<{}> = () => {
-
-
- -
- { - Array(numItems).fill(0).map((_, i) => { - return ( - {i + 1} - ); - }) - } -
-
- )} - source={` -
+html={` +
... -
+
-
+
...
@@ -133,7 +74,71 @@ const Details: React.FC<{}> = () => { ...
`} - /> +css={` +.container { + position: relative; +} +.item { + /* Position */ + position: absolute; + top: 0; + + /* + 80px is the distance from the item to the trigger element. + Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item + in case you want to have a total of 6 menu items. + The formulation is 360 / numberOfItems * indexOfItem + */ + transform: rotate(0deg) translateX(-80px); + + /* Must have the same size as the trigger element */ + height: 32px; + width: 32px; +} +.inner { + /* + Rotate it to make it displayed vertically + Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item + in case you want to have a total of 6 menu items. + The formulation is -(360 / numberOfItems * indexOfItem) + */ + transform: rotate(-0deg); + + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Take full size */ + height: 100%; + width: 100%; +} +`} + > +
+
+
+ +
+ { + Array(numItems).fill(0).map((_, i) => { + return ( + {i + 1} + ); + }) + } +
+
+
); diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx index 584e82d..d26689d 100644 --- a/client/patterns/close-button/Details.tsx +++ b/client/patterns/close-button/Details.tsx @@ -20,53 +20,7 @@ const Details: React.FC<{}> = () => {
- -
- )} - source={` +html={` `} - /> +css={``} + > +
+ +
+
diff --git a/client/patterns/cookie-banner/Details.tsx b/client/patterns/cookie-banner/Details.tsx index aec2f57..6469e28 100644 --- a/client/patterns/cookie-banner/Details.tsx +++ b/client/patterns/cookie-banner/Details.tsx @@ -22,40 +22,7 @@ const Details: React.FC<{}> = () => {
-
-
- -
-
- -
-
-
- )} - source={` +html={`
@@ -109,7 +65,51 @@ const Details: React.FC<{}> = () => {
`} - /> +css={``} + > +
+
+
+
+
+
+
+
diff --git a/client/patterns/curved-background/Details.tsx b/client/patterns/curved-background/Details.tsx index 6d467bf..d09fb7b 100644 --- a/client/patterns/curved-background/Details.tsx +++ b/client/patterns/curved-background/Details.tsx @@ -20,25 +20,7 @@ const Details: React.FC<{}> = () => {
-
-
- )} - source={` +html={`
+html={` +
- )} - source={` +html={` - -
- - - - -
- ... -
-
`} - /> + > +
+
+ + +
+
+ +
+
+
+
+ +
+
+
diff --git a/client/patterns/fading-long-section/Details.tsx b/client/patterns/fading-long-section/Details.tsx index 26f25dc..692642f 100644 --- a/client/patterns/fading-long-section/Details.tsx +++ b/client/patterns/fading-long-section/Details.tsx @@ -23,41 +23,7 @@ const Details: React.FC<{}> = () => { Fading a long section to indicate there is more content.
-
-
- -
- -
-
-
- )} - source={` +html={`
`} - /> +css={``} + > +
+
+
+ +
+ +
+
+
+
); diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx index 965e726..7038763 100644 --- a/client/patterns/feature-comparison/Details.tsx +++ b/client/patterns/feature-comparison/Details.tsx @@ -23,113 +23,7 @@ const Details: React.FC<{}> = () => {
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- -
-
- -
-
-
-
-
- )} - source={` +html={`
= () => { ... `} - /> +css={``} + > +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx index 701296a..b716900 100644 --- a/client/patterns/fixed-at-corner/Details.tsx +++ b/client/patterns/fixed-at-corner/Details.tsx @@ -21,23 +21,7 @@ const Details: React.FC<{}> = () => {
-
- -
-
- -
-
- -
-
- -
-
- )} - source={` +html={`
@@ -78,7 +62,23 @@ const Details: React.FC<{}> = () => {
`} - /> +css={``} + > +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
diff --git a/client/patterns/fixed-at-side/Details.tsx b/client/patterns/fixed-at-side/Details.tsx index a9e014e..b74b17d 100644 --- a/client/patterns/fixed-at-side/Details.tsx +++ b/client/patterns/fixed-at-side/Details.tsx @@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
-
-
- )} - source={` +html={`
- - -
-
- )} - source={` - - -
- - - - - -
`} - /> + > +
+
+ + +
+
+
); diff --git a/client/patterns/full-background/Details.tsx b/client/patterns/full-background/Details.tsx index 780e5c5..219ab85 100644 --- a/client/patterns/full-background/Details.tsx +++ b/client/patterns/full-background/Details.tsx @@ -21,34 +21,7 @@ const Details: React.FC<{}> = () => {
-
-
- -
-
-
- )} - source={` +html={`
+
+ +
+
+ + diff --git a/client/patterns/full-screen-menu/Details.tsx b/client/patterns/full-screen-menu/Details.tsx index 17d79ba..7029d1a 100644 --- a/client/patterns/full-screen-menu/Details.tsx +++ b/client/patterns/full-screen-menu/Details.tsx @@ -20,81 +20,21 @@ const Details: React.FC<{}> = () => {
- -
-
    -
    • -
    • -
    • -
    • -
-
-
- )} - source={` -
+ + + + +
    + ... +
+
+`} +css={` +.container { /* Full screen overlay */ height: 100%; left: 0; @@ -106,24 +46,89 @@ const Details: React.FC<{}> = () => { align-items: center; display: flex; justify-content: center; -"> - - +} - -
    - ... -
- +.close { + /* Shown at top right corner */ + position: absolute; + right: 16px; + top: 16px; +} `} - /> + > +
+ +
+
    +
    • +
    • +
    • +
    • +
+
+
+ ); diff --git a/client/patterns/holy-grail/Details.tsx b/client/patterns/holy-grail/Details.tsx index 2c3c4d7..ad0a0d7 100644 --- a/client/patterns/holy-grail/Details.tsx +++ b/client/patterns/holy-grail/Details.tsx @@ -21,97 +21,101 @@ const Details: React.FC<{}> = () => {
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
- )} - source={` -
+html={` +
...
-
+
- + -
- ... -
+
...
- +
...
`} - /> +css={` +.container { + display: flex; + flex-direction: column; +} +.main { + /* Take the remaining height */ + flex-grow: 1; + + /* Layout the left sidebar, main content and right sidebar */ + display: flex; + flex-direction: row; +} +.left { + width: 25%; +} +.middle { + /* Take the remaining width */ + flex-grow: 1; +} +.right { + width: 20%; +} +`} + > +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
); diff --git a/client/patterns/initial-avatar/Details.tsx b/client/patterns/initial-avatar/Details.tsx index 70cdc30..39dde5e 100644 --- a/client/patterns/initial-avatar/Details.tsx +++ b/client/patterns/initial-avatar/Details.tsx @@ -25,44 +25,7 @@ const Details: React.FC<{}> = () => { the Centering pattern. -
-
- PN -
-
- - )} - source={` +html={`
-
-
- -
- -
-
-
-
- -
- -
- -
-
- - - )} - source={` +html={` -
+
-
+
...
- +
-
+
- + -
+
...
-
+
-
+
...
- + -
+
...
`} - /> +css={` +.container { + display: flex; + + /* Take full size */ + width: 100%; +} + +.container__input { + /* Take the remaining width */ + flex: 1; +} + +.container__addon { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; +} +`} + > +
+
+
+
+ +
+ +
+
+ +
+ +
+
+
+
+ +
+ +
+ +
+
+
+
+
); diff --git a/client/patterns/keyboard-shortcut/Details.tsx b/client/patterns/keyboard-shortcut/Details.tsx index 0f05188..9d347b3 100644 --- a/client/patterns/keyboard-shortcut/Details.tsx +++ b/client/patterns/keyboard-shortcut/Details.tsx @@ -56,31 +56,7 @@ const Details: React.FC<{}> = () => { We use the native kbd tag to display the keyboard shortcut.
- - ⌘ + C - -
- )} - source={` +html={` = () => { ...
`} - /> +css={``} + > +
+
+
+ Cascading Style Sheets (CSS) is a style sheet language used for + describing the presentation of a document written in a markup + language like HTML. CSS is a cornerstone technology of the World Wide Web, + alongside HTML and JavaScript. +
+
— Wikipedia
+
+
+
); diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx index 07eb0ea..74eb200 100644 --- a/client/patterns/media-object/Details.tsx +++ b/client/patterns/media-object/Details.tsx @@ -22,28 +22,7 @@ const Details: React.FC<{}> = () => {
-
- -
-
-
- -
-
-
-
-
- )} - source={` +html={`
+ + ... -
- -
-
- )} - source={` - - -
- - ... - - -
- -
...
- - -
- ... -
-
-
`} - /> + > +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+ +
+ +
+
+
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx index f7232e1..2b9bc04 100644 --- a/client/patterns/menu/Details.tsx +++ b/client/patterns/menu/Details.tsx @@ -24,144 +24,15 @@ const Details: React.FC<{}> = () => {
-
-
-
-
-
- -
-
-
-
-
Ctrl + X
-
-
-
-
Ctrl + C
-
-
-
- -
-
-
- -
-
- -
-
-
-
-
Ctrl + V
-
-
-
- )} - source={` -
+html={` +
-
+
...
-
+
... @@ -169,16 +40,8 @@ const Details: React.FC<{}> = () => {
-
-
+
+
... @@ -190,13 +53,153 @@ const Details: React.FC<{}> = () => {
-
+
`} - /> +css={` +.container { + display: flex; + flex-direction: column; + + /* Border */ + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 4px; +} + +.item { + /* Center the content horizontally */ + align-items: center; + display: flex; +} + +.with-shortcut { + /* Push the hot key to the right */ + justify-content: space-between; +} + +.with-image { + align-items: center; + display: flex; +} + +.divider { + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + height: 1px; +} +`} + > +
+
+
+
+
+
+ +
+
+
+
+
Ctrl + X
+
+
+
+
Ctrl + C
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
Ctrl + V
+
+
+
+
= () => { represent the button for closing the modal.
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-
- )} - source={` +html={`
-
  • Home
    • -
  • -
    Patterns
    -
      -
    • Layout
      • -
    • Input
      • -
    • -
      Navigation
      -
        -
      • Breadcrumb
        • -
      • Dropdown
        • -
      • Menu
        • -
      • Nested dropdown
        • -
      -
      • -
    • Display
      • -
    • Feedback
      • -
    -
    • -
  • Products
    • -
  • About
    • - -
    - )} - source={` - - -
      +html={` +
      • Home
      • Patterns
        @@ -144,7 +52,96 @@ const Details: React.FC<{}> = () => {
      • About
      `} - /> +css={` +.container { + /* Border */ + border: 1px solid rgba(0, 0, 0, 0.3); + display: flex; + + /* Reset list styles */ + list-style-type: none; + margin: 0; + padding: 0; +} + +.container li { + /* Spacing */ + padding: 8px; + + /* Used to position the sub dropdown */ + position: relative; +} + +/* The sub dropdown */ +.container ul { + /* Border */ + border: 1px solid rgba(0, 0, 0, 0.3); + + /* Hidden by default */ + display: none; + + /* Absolute position */ + left: 0; + position: absolute; + top: 100%; + + /* Reset styles */ + list-style-type: none; + margin: 0; + padding: 0; + + /* Width */ + width: 200px; +} + +/* The second level sub dropdown */ +.container ul ul { + left: 100%; + position: absolute; + top: 0; +} + +/* Change background color of list item when being hovered */ +.container li:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +/* Show the direct sub dropdown when hovering the list item */ +.container li:hover > ul { + display: block; +} +`} + > +
      +
        +
      • Home
        • +
      • +
        Patterns
        +
          +
        • Layout
          • +
        • Input
          • +
        • +
          Navigation
          +
            +
          • Breadcrumb
            • +
          • Dropdown
            • +
          • Menu
            • +
          • Nested dropdown
            • +
          +
          • +
        • Display
          • +
        • Feedback
          • +
        +
        • +
      • Products
        • +
      • About
        • +
      +
      +
    diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx index 2d4f8ee..fddf803 100644 --- a/client/patterns/notification/Details.tsx +++ b/client/patterns/notification/Details.tsx @@ -26,46 +26,7 @@ const Details: React.FC<{}> = () => { represent the button for closing the notification.
    -
    -
    - -
    -
    - )} - source={` +html={`
    = () => {
    `} - /> +css={``} + > +
    +
    +
    +
    + +
    +
    +
    +
    +
    diff --git a/client/patterns/pagination/Details.tsx b/client/patterns/pagination/Details.tsx index 38da19d..35ed384 100644 --- a/client/patterns/pagination/Details.tsx +++ b/client/patterns/pagination/Details.tsx @@ -21,130 +21,130 @@ const Details: React.FC<{}> = () => {
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    - )} - source={` -
    + +
    + ... +
    + + + ... +
    +`} +css={` +.container { display: flex; /* Border */ border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; -"> - -
    - ... -
    +.item { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; - -
    - ... -
    -
    + /* Right border */ + border-right: 1px solid rgba(0, 0, 0, 0.3); +} +.item + .item { + /* No right border */ + border-right: none; +} `} - /> + > +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    ); diff --git a/client/patterns/popover-arrow/Details.tsx b/client/patterns/popover-arrow/Details.tsx index bbc07b4..c9a0472 100644 --- a/client/patterns/popover-arrow/Details.tsx +++ b/client/patterns/popover-arrow/Details.tsx @@ -20,190 +20,7 @@ const Details: React.FC<{}> = () => {
    -
    -
    -
    -
    - -
    -
    -
    - -
    -
    -
    - -
    -
    -
    -
    -
    - )} - source={` +html={`
    `} - /> +css={``} + > +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +
    +
    +
    diff --git a/client/patterns/presence-indicator/Details.tsx b/client/patterns/presence-indicator/Details.tsx index 6ad9cac..536e085 100644 --- a/client/patterns/presence-indicator/Details.tsx +++ b/client/patterns/presence-indicator/Details.tsx @@ -21,41 +21,7 @@ const Details: React.FC<{}> = () => {
    -
    - -
    -
    -
    - )} - source={` +html={`
    @@ -80,7 +46,41 @@ const Details: React.FC<{}> = () => { " />
    `} - /> +css={``} + > +
    +
    + +
    +
    +
    +
    = () => {
    - -
    - )} - source={` -
    +html={` +
    .. @@ -85,7 +29,65 @@ const Details: React.FC<{}> = () => { ..
    `} - /> +css={` +.container { + align-items: center; + display: flex; + justify-content: space-between; +} +`} + > +
    + +
    +
    ); diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx index 78eaae1..e52cdf1 100644 --- a/client/patterns/pricing-table/Details.tsx +++ b/client/patterns/pricing-table/Details.tsx @@ -28,88 +28,7 @@ const Details: React.FC<{}> = () => { indicate the most popular option.
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - )} - source={` +html={`
    = () => {
    `} - /> +css={``} + > +
    +
    +
    + {progress}% +
    +
    +
    +
    ); diff --git a/client/patterns/property-list/Details.tsx b/client/patterns/property-list/Details.tsx index ae4df78..c39ac4d 100644 --- a/client/patterns/property-list/Details.tsx +++ b/client/patterns/property-list/Details.tsx @@ -40,38 +40,7 @@ const Details: React.FC<{}> = () => {
    -
    - -
    -
    -     - -
    -
    -     - -
    -
    -     - -
    -
    -     -
    -
    - )} - source={` +html={`
    diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx index ccae2ec..8593c4b 100644 --- a/client/patterns/questions-and-answers/Details.tsx +++ b/client/patterns/questions-and-answers/Details.tsx @@ -60,64 +60,7 @@ const Details: React.FC<{}> = () => {
    -
    -
    - -
    -
    -
    } - > - - -
    -
    -
    } - > - - -
    -
    -
    } - > - - -
    -
    -
    - )} - source={` +html={`
    @@ -178,7 +164,21 @@ const Details: React.FC<{}> = () => {
    `} - /> +css={``} + > +
    +
    + +
    +
    ); diff --git a/client/patterns/radio-button-group/Details.tsx b/client/patterns/radio-button-group/Details.tsx index eade9dc..5ee8c11 100644 --- a/client/patterns/radio-button-group/Details.tsx +++ b/client/patterns/radio-button-group/Details.tsx @@ -56,85 +56,16 @@ const Details: React.FC<{}> = () => {
    -
    - -
    -     - -
    -     - -
    -     -
    -
    - )} - source={` +html={` -
    +
    -
    `} - /> +css={` +.container { + display: flex; + + /* Border */ + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 4px; + height: 32px; +} + +.container__label { + /* Center the content */ + align-items: center; + display: inline-flex; + + border-right: 1px solid rgba(0, 0, 0, 0.3); + padding: 8px; + + /* For not selected radio */ + background-color: transparent; + color: #CCC; +} + +.container__label:last-child { + /* Remove the right border from the last label */ + border-right-color: transparent; +} + +.container__label--selected { + /* For selected radio */ + background-color: #00449E; + color: #FFF; +} + +.container__input { + /* Hide it */ + display: none; +} +`} + > +
    +
    + +
    +     + +
    +     + +
    +     +
    +
    +
    diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx index 09b6688..9dee613 100644 --- a/client/patterns/radio-switch/Details.tsx +++ b/client/patterns/radio-switch/Details.tsx @@ -24,99 +24,12 @@ const Details: React.FC<{}> = () => {
    -
    -