playbook_ui 11.15.0.pre.alpha.table1 → 11.15.0
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.
- checksums.yaml +4 -4
 - data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
 - data/app/pb_kits/playbook/pb_table/styles/_as-cards.scss +49 -0
 - data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +0 -4
 - data/app/pb_kits/playbook/pb_table/styles/_hover.scss +25 -28
 - data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +0 -4
 - data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +0 -4
 - data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +1 -0
 - data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +27 -0
 - data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +0 -4
 - data/lib/playbook/version.rb +2 -2
 - metadata +5 -4
 
    
        checksums.yaml
    CHANGED
    
    | 
         @@ -1,7 +1,7 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            ---
         
     | 
| 
       2 
2 
     | 
    
         
             
            SHA256:
         
     | 
| 
       3 
     | 
    
         
            -
              metadata.gz:  
     | 
| 
       4 
     | 
    
         
            -
              data.tar.gz:  
     | 
| 
      
 3 
     | 
    
         
            +
              metadata.gz: cffd8ae39a8b80f013b9bc0fca179e7cdd94be62b1bfcba8a786984fbe6bb15a
         
     | 
| 
      
 4 
     | 
    
         
            +
              data.tar.gz: 320820bff742b9b95b6d0867f81782eb6d20edee840ca1e65bd9ecc9fc96d805
         
     | 
| 
       5 
5 
     | 
    
         
             
            SHA512:
         
     | 
| 
       6 
     | 
    
         
            -
              metadata.gz:  
     | 
| 
       7 
     | 
    
         
            -
              data.tar.gz:  
     | 
| 
      
 6 
     | 
    
         
            +
              metadata.gz: 612b82bdc76521177c494de8203d6a64147a8dc2e6863ad0f28edef9eece3c410236ffa234220ed8c1d0ad69c5b857b8023fa2bf6d0680fec24054f8acd4bbde
         
     | 
| 
      
 7 
     | 
    
         
            +
              data.tar.gz: 24e96215afa640ea123786fb2a3656a91e5bff64e3a49b17598034230949be6b1e6671270cb1dee78edaf3563dee09dd09d5f1a7f6f5c9e1b7ba0c80173f5472
         
     | 
| 
         @@ -0,0 +1,49 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            [class^=pb_table] {
         
     | 
| 
      
 2 
     | 
    
         
            +
              &.table-sm,
         
     | 
| 
      
 3 
     | 
    
         
            +
              &.table-md,
         
     | 
| 
      
 4 
     | 
    
         
            +
              &.table-lg {
         
     | 
| 
      
 5 
     | 
    
         
            +
                &.as-cards {
         
     | 
| 
      
 6 
     | 
    
         
            +
                  thead {
         
     | 
| 
      
 7 
     | 
    
         
            +
                    tr {
         
     | 
| 
      
 8 
     | 
    
         
            +
                      display: flex;
         
     | 
| 
      
 9 
     | 
    
         
            +
                      width: 100%;
         
     | 
| 
      
 10 
     | 
    
         
            +
             
     | 
| 
      
 11 
     | 
    
         
            +
                      th {
         
     | 
| 
      
 12 
     | 
    
         
            +
                        flex-grow: 1;
         
     | 
| 
      
 13 
     | 
    
         
            +
                      }
         
     | 
| 
      
 14 
     | 
    
         
            +
                    }
         
     | 
| 
      
 15 
     | 
    
         
            +
                  }
         
     | 
| 
      
 16 
     | 
    
         
            +
                  tbody {
         
     | 
| 
      
 17 
     | 
    
         
            +
                    tr {
         
     | 
| 
      
 18 
     | 
    
         
            +
                      display: flex;
         
     | 
| 
      
 19 
     | 
    
         
            +
                      align-items: stretch;
         
     | 
| 
      
 20 
     | 
    
         
            +
                      flex-direction: row;
         
     | 
| 
      
 21 
     | 
    
         
            +
                      justify-content: flex-start;
         
     | 
| 
      
 22 
     | 
    
         
            +
                      width: 100%;
         
     | 
| 
      
 23 
     | 
    
         
            +
                      margin: $space-xs 0;
         
     | 
| 
      
 24 
     | 
    
         
            +
             
     | 
| 
      
 25 
     | 
    
         
            +
                      td {
         
     | 
| 
      
 26 
     | 
    
         
            +
                        background: $white;
         
     | 
| 
      
 27 
     | 
    
         
            +
                        flex-grow: 1;
         
     | 
| 
      
 28 
     | 
    
         
            +
                        border-width: 1px 0;
         
     | 
| 
      
 29 
     | 
    
         
            +
             
     | 
| 
      
 30 
     | 
    
         
            +
                        &:first-child {
         
     | 
| 
      
 31 
     | 
    
         
            +
                          border-left-width: 1px;
         
     | 
| 
      
 32 
     | 
    
         
            +
                          border-radius: 4px 0 0 4px;
         
     | 
| 
      
 33 
     | 
    
         
            +
                        }
         
     | 
| 
      
 34 
     | 
    
         
            +
                        &:last-child {
         
     | 
| 
      
 35 
     | 
    
         
            +
                          border-right-width: 1px;
         
     | 
| 
      
 36 
     | 
    
         
            +
                          border-radius: 0 4px 4px 0;
         
     | 
| 
      
 37 
     | 
    
         
            +
                        }
         
     | 
| 
      
 38 
     | 
    
         
            +
                      }
         
     | 
| 
      
 39 
     | 
    
         
            +
             
     | 
| 
      
 40 
     | 
    
         
            +
                      &:last-child {
         
     | 
| 
      
 41 
     | 
    
         
            +
                        td {
         
     | 
| 
      
 42 
     | 
    
         
            +
                          border-top-width: 1px !important;
         
     | 
| 
      
 43 
     | 
    
         
            +
                        }
         
     | 
| 
      
 44 
     | 
    
         
            +
                      }
         
     | 
| 
      
 45 
     | 
    
         
            +
                    }
         
     | 
| 
      
 46 
     | 
    
         
            +
                  }
         
     | 
| 
      
 47 
     | 
    
         
            +
                }
         
     | 
| 
      
 48 
     | 
    
         
            +
              }
         
     | 
| 
      
 49 
     | 
    
         
            +
            }
         
     | 
| 
         @@ -81,10 +81,6 @@ 
     | 
|
| 
       81 
81 
     | 
    
         
             
                          border-left-width: 1px !important;
         
     | 
| 
       82 
82 
     | 
    
         
             
                          border-right-width: 1px !important;
         
     | 
| 
       83 
83 
     | 
    
         
             
                          border-top-width: 1px !important;
         
     | 
| 
       84 
     | 
    
         
            -
                          &:after {
         
     | 
| 
       85 
     | 
    
         
            -
                            height: 0;
         
     | 
| 
       86 
     | 
    
         
            -
                            background-color: transparent;
         
     | 
| 
       87 
     | 
    
         
            -
                          }
         
     | 
| 
       88 
84 
     | 
    
         | 
| 
       89 
85 
     | 
    
         
             
                          &:first-child {
         
     | 
| 
       90 
86 
     | 
    
         
             
                            border-radius: $border_rad_light $border_rad_light 0 0 !important;
         
     | 
| 
         @@ -12,42 +12,39 @@ $transition-speed: 0.2s; 
     | 
|
| 
       12 
12 
     | 
    
         
             
                    tr {
         
     | 
| 
       13 
13 
     | 
    
         
             
                      box-shadow: 0 0 0 $white;
         
     | 
| 
       14 
14 
     | 
    
         
             
                      transition: box-shadow $transition-speed ease;
         
     | 
| 
      
 15 
     | 
    
         
            +
             
     | 
| 
       15 
16 
     | 
    
         
             
                      td {
         
     | 
| 
       16 
17 
     | 
    
         
             
                        border-top-color: transparent;
         
     | 
| 
       17 
     | 
    
         
            -
                        border-top-width:  
     | 
| 
       18 
     | 
    
         
            -
                        transition: all $transition-speed ease; 
     | 
| 
      
 18 
     | 
    
         
            +
                        border-top-width: 1px !important;
         
     | 
| 
      
 19 
     | 
    
         
            +
                        transition: all $transition-speed ease;
         
     | 
| 
       19 
20 
     | 
    
         
             
                      }
         
     | 
| 
       20 
     | 
    
         
            -
             
     | 
| 
       21 
     | 
    
         
            -
             
     | 
| 
       22 
     | 
    
         
            -
                          position: relative;
         
     | 
| 
       23 
     | 
    
         
            -
                          &:after {
         
     | 
| 
       24 
     | 
    
         
            -
                            transition: background-color $transition-speed ease, height $transition-speed ease;
         
     | 
| 
       25 
     | 
    
         
            -
                            content: "";
         
     | 
| 
       26 
     | 
    
         
            -
                            position: absolute;
         
     | 
| 
       27 
     | 
    
         
            -
                            display: block;
         
     | 
| 
       28 
     | 
    
         
            -
                            top: -1px;
         
     | 
| 
       29 
     | 
    
         
            -
                            left: 0;
         
     | 
| 
       30 
     | 
    
         
            -
                            right: 0;
         
     | 
| 
       31 
     | 
    
         
            -
                            height: 0;
         
     | 
| 
       32 
     | 
    
         
            -
                            background-color: transparent;
         
     | 
| 
       33 
     | 
    
         
            -
                          }
         
     | 
| 
       34 
     | 
    
         
            -
                          &:first-child:after {
         
     | 
| 
       35 
     | 
    
         
            -
                            left: -1px;
         
     | 
| 
       36 
     | 
    
         
            -
                          }
         
     | 
| 
       37 
     | 
    
         
            -
                          &:last-child:after {
         
     | 
| 
       38 
     | 
    
         
            -
                            right: -1px;
         
     | 
| 
       39 
     | 
    
         
            -
                          }
         
     | 
| 
       40 
     | 
    
         
            -
                        }
         
     | 
| 
      
 21 
     | 
    
         
            +
             
     | 
| 
      
 22 
     | 
    
         
            +
                      @media (hover:hover) {
         
     | 
| 
       41 
23 
     | 
    
         
             
                        &:hover {
         
     | 
| 
       42 
24 
     | 
    
         
             
                          box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
         
     | 
| 
      
 25 
     | 
    
         
            +
             
     | 
| 
       43 
26 
     | 
    
         
             
                          td {
         
     | 
| 
      
 27 
     | 
    
         
            +
                            background: $white;
         
     | 
| 
       44 
28 
     | 
    
         
             
                            border-color: darken($border_light, 10%);
         
     | 
| 
       45 
     | 
    
         
            -
                            border-top-width:  
     | 
| 
      
 29 
     | 
    
         
            +
                            border-top-width: 1px;
         
     | 
| 
       46 
30 
     | 
    
         
             
                            border-top-color: transparent;
         
     | 
| 
       47 
     | 
    
         
            -
             
     | 
| 
       48 
     | 
    
         
            -
             
     | 
| 
       49 
     | 
    
         
            -
             
     | 
| 
       50 
     | 
    
         
            -
             
     | 
| 
      
 31 
     | 
    
         
            +
                          }
         
     | 
| 
      
 32 
     | 
    
         
            +
                        }
         
     | 
| 
      
 33 
     | 
    
         
            +
                      }
         
     | 
| 
      
 34 
     | 
    
         
            +
                    }
         
     | 
| 
      
 35 
     | 
    
         
            +
                  }
         
     | 
| 
      
 36 
     | 
    
         
            +
                  &.as-cards {
         
     | 
| 
      
 37 
     | 
    
         
            +
                    tbody {
         
     | 
| 
      
 38 
     | 
    
         
            +
                      tr {
         
     | 
| 
      
 39 
     | 
    
         
            +
                        td {
         
     | 
| 
      
 40 
     | 
    
         
            +
                          border-top-color: $border_light;
         
     | 
| 
      
 41 
     | 
    
         
            +
                          border-top-width: 1px;
         
     | 
| 
      
 42 
     | 
    
         
            +
                        }
         
     | 
| 
      
 43 
     | 
    
         
            +
                        @media (hover:hover) {
         
     | 
| 
      
 44 
     | 
    
         
            +
                          &:hover {
         
     | 
| 
      
 45 
     | 
    
         
            +
                            td {
         
     | 
| 
      
 46 
     | 
    
         
            +
                              border-top-width: 1px;
         
     | 
| 
      
 47 
     | 
    
         
            +
                              border-top-color: $border_light;
         
     | 
| 
       51 
48 
     | 
    
         
             
                            }
         
     | 
| 
       52 
49 
     | 
    
         
             
                          }
         
     | 
| 
       53 
50 
     | 
    
         
             
                        }
         
     | 
| 
         @@ -81,10 +81,6 @@ 
     | 
|
| 
       81 
81 
     | 
    
         
             
                          border-left-width: 1px !important;
         
     | 
| 
       82 
82 
     | 
    
         
             
                          border-right-width: 1px !important;
         
     | 
| 
       83 
83 
     | 
    
         
             
                          border-top-width: 1px !important;
         
     | 
| 
       84 
     | 
    
         
            -
                          &:after {
         
     | 
| 
       85 
     | 
    
         
            -
                            height: 0;
         
     | 
| 
       86 
     | 
    
         
            -
                            background-color: transparent;
         
     | 
| 
       87 
     | 
    
         
            -
                          }
         
     | 
| 
       88 
84 
     | 
    
         | 
| 
       89 
85 
     | 
    
         
             
                          &:first-child {
         
     | 
| 
       90 
86 
     | 
    
         
             
                            border-radius: $border_rad_light $border_rad_light 0 0 !important;
         
     | 
| 
         @@ -81,10 +81,6 @@ 
     | 
|
| 
       81 
81 
     | 
    
         
             
                          border-left-width: 1px !important;
         
     | 
| 
       82 
82 
     | 
    
         
             
                          border-right-width: 1px !important;
         
     | 
| 
       83 
83 
     | 
    
         
             
                          border-top-width: 1px !important;
         
     | 
| 
       84 
     | 
    
         
            -
                          &:after {
         
     | 
| 
       85 
     | 
    
         
            -
                            height: 0;
         
     | 
| 
       86 
     | 
    
         
            -
                            background-color: transparent;
         
     | 
| 
       87 
     | 
    
         
            -
                          }
         
     | 
| 
       88 
84 
     | 
    
         | 
| 
       89 
85 
     | 
    
         
             
                          &:first-child {
         
     | 
| 
       90 
86 
     | 
    
         
             
                            border-radius: $border_rad_light $border_rad_light 0 0 !important;
         
     | 
| 
         @@ -57,6 +57,33 @@ 
     | 
|
| 
       57 
57 
     | 
    
         
             
                      }
         
     | 
| 
       58 
58 
     | 
    
         
             
                    }
         
     | 
| 
       59 
59 
     | 
    
         
             
                  }
         
     | 
| 
      
 60 
     | 
    
         
            +
             
     | 
| 
      
 61 
     | 
    
         
            +
                  &.as-cards {
         
     | 
| 
      
 62 
     | 
    
         
            +
                    border: 1px solid $border_light;
         
     | 
| 
      
 63 
     | 
    
         
            +
                    border-radius: 4px;
         
     | 
| 
      
 64 
     | 
    
         
            +
             
     | 
| 
      
 65 
     | 
    
         
            +
                    thead {
         
     | 
| 
      
 66 
     | 
    
         
            +
                      tr {
         
     | 
| 
      
 67 
     | 
    
         
            +
                        margin: $space-xs 0 0;
         
     | 
| 
      
 68 
     | 
    
         
            +
                        padding: 0 $space-xs;
         
     | 
| 
      
 69 
     | 
    
         
            +
                        border-bottom: 1px solid $border_light;
         
     | 
| 
      
 70 
     | 
    
         
            +
             
     | 
| 
      
 71 
     | 
    
         
            +
                        th {
         
     | 
| 
      
 72 
     | 
    
         
            +
                          border-width: 0;
         
     | 
| 
      
 73 
     | 
    
         
            +
                        }
         
     | 
| 
      
 74 
     | 
    
         
            +
                      }
         
     | 
| 
      
 75 
     | 
    
         
            +
                    }
         
     | 
| 
      
 76 
     | 
    
         
            +
                    tbody {
         
     | 
| 
      
 77 
     | 
    
         
            +
                      tr {
         
     | 
| 
      
 78 
     | 
    
         
            +
                        margin: $space-xs;
         
     | 
| 
      
 79 
     | 
    
         
            +
                        width: calc(100% - #{$space-xs}*2);
         
     | 
| 
      
 80 
     | 
    
         
            +
             
     | 
| 
      
 81 
     | 
    
         
            +
                        td {
         
     | 
| 
      
 82 
     | 
    
         
            +
                          border-top-width: 1px;
         
     | 
| 
      
 83 
     | 
    
         
            +
                        }
         
     | 
| 
      
 84 
     | 
    
         
            +
                      }
         
     | 
| 
      
 85 
     | 
    
         
            +
                    }
         
     | 
| 
      
 86 
     | 
    
         
            +
                  }
         
     | 
| 
       60 
87 
     | 
    
         
             
                }
         
     | 
| 
       61 
88 
     | 
    
         
             
              }
         
     | 
| 
       62 
89 
     | 
    
         
             
            }
         
     | 
| 
         @@ -81,10 +81,6 @@ 
     | 
|
| 
       81 
81 
     | 
    
         
             
                          border-left-width: 1px !important;
         
     | 
| 
       82 
82 
     | 
    
         
             
                          border-right-width: 1px !important;
         
     | 
| 
       83 
83 
     | 
    
         
             
                          border-top-width: 1px !important;
         
     | 
| 
       84 
     | 
    
         
            -
                          &:after {
         
     | 
| 
       85 
     | 
    
         
            -
                            height: 0;
         
     | 
| 
       86 
     | 
    
         
            -
                            background-color: transparent;
         
     | 
| 
       87 
     | 
    
         
            -
                          }
         
     | 
| 
       88 
84 
     | 
    
         | 
| 
       89 
85 
     | 
    
         
             
                          &:first-child {
         
     | 
| 
       90 
86 
     | 
    
         
             
                            border-radius: $border_rad_light $border_rad_light 0 0 !important;
         
     | 
    
        data/lib/playbook/version.rb
    CHANGED
    
    
    
        metadata
    CHANGED
    
    | 
         @@ -1,7 +1,7 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            --- !ruby/object:Gem::Specification
         
     | 
| 
       2 
2 
     | 
    
         
             
            name: playbook_ui
         
     | 
| 
       3 
3 
     | 
    
         
             
            version: !ruby/object:Gem::Version
         
     | 
| 
       4 
     | 
    
         
            -
              version: 11.15.0 
     | 
| 
      
 4 
     | 
    
         
            +
              version: 11.15.0
         
     | 
| 
       5 
5 
     | 
    
         
             
            platform: ruby
         
     | 
| 
       6 
6 
     | 
    
         
             
            authors:
         
     | 
| 
       7 
7 
     | 
    
         
             
            - Power UX
         
     | 
| 
         @@ -9,7 +9,7 @@ authors: 
     | 
|
| 
       9 
9 
     | 
    
         
             
            autorequire:
         
     | 
| 
       10 
10 
     | 
    
         
             
            bindir: bin
         
     | 
| 
       11 
11 
     | 
    
         
             
            cert_chain: []
         
     | 
| 
       12 
     | 
    
         
            -
            date: 2022-12- 
     | 
| 
      
 12 
     | 
    
         
            +
            date: 2022-12-19 00:00:00.000000000 Z
         
     | 
| 
       13 
13 
     | 
    
         
             
            dependencies:
         
     | 
| 
       14 
14 
     | 
    
         
             
            - !ruby/object:Gem::Dependency
         
     | 
| 
       15 
15 
     | 
    
         
             
              name: actionpack
         
     | 
| 
         @@ -1873,6 +1873,7 @@ files: 
     | 
|
| 
       1873 
1873 
     | 
    
         
             
            - app/pb_kits/playbook/pb_table/index.js
         
     | 
| 
       1874 
1874 
     | 
    
         
             
            - app/pb_kits/playbook/pb_table/styles/_alignment.scss
         
     | 
| 
       1875 
1875 
     | 
    
         
             
            - app/pb_kits/playbook/pb_table/styles/_all.scss
         
     | 
| 
      
 1876 
     | 
    
         
            +
            - app/pb_kits/playbook/pb_table/styles/_as-cards.scss
         
     | 
| 
       1876 
1877 
     | 
    
         
             
            - app/pb_kits/playbook/pb_table/styles/_content.scss
         
     | 
| 
       1877 
1878 
     | 
    
         
             
            - app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss
         
     | 
| 
       1878 
1879 
     | 
    
         
             
            - app/pb_kits/playbook/pb_table/styles/_headers.scss
         
     | 
| 
         @@ -2358,9 +2359,9 @@ required_ruby_version: !ruby/object:Gem::Requirement 
     | 
|
| 
       2358 
2359 
     | 
    
         
             
                  version: '0'
         
     | 
| 
       2359 
2360 
     | 
    
         
             
            required_rubygems_version: !ruby/object:Gem::Requirement
         
     | 
| 
       2360 
2361 
     | 
    
         
             
              requirements:
         
     | 
| 
       2361 
     | 
    
         
            -
              - - " 
     | 
| 
      
 2362 
     | 
    
         
            +
              - - ">="
         
     | 
| 
       2362 
2363 
     | 
    
         
             
                - !ruby/object:Gem::Version
         
     | 
| 
       2363 
     | 
    
         
            -
                  version:  
     | 
| 
      
 2364 
     | 
    
         
            +
                  version: '0'
         
     | 
| 
       2364 
2365 
     | 
    
         
             
            requirements: []
         
     | 
| 
       2365 
2366 
     | 
    
         
             
            rubygems_version: 3.3.7
         
     | 
| 
       2366 
2367 
     | 
    
         
             
            signing_key:
         
     |