diff --git a/opentech/static_src/src/sass/apply/components/_table.scss b/opentech/static_src/src/sass/apply/components/_table.scss new file mode 100644 index 0000000000000000000000000000000000000000..bd6593fa98b30fe43118fd516e828cdfa78a5127 --- /dev/null +++ b/opentech/static_src/src/sass/apply/components/_table.scss @@ -0,0 +1,142 @@ +$table-breakpoint: 'mob-landscape'; + +table { + width: 100%; + border-collapse: collapse; + table-layout: fixed; + + thead { + display: none; + + @include media-query($table-breakpoint) { + display: table-header-group; + } + + tr { + background-color: transparent; + } + } + + tr { + background-color: #fff; + border: 1px solid #e8e8e8; + + @include media-query($table-breakpoint) { + border-top: 0; + border-right: 0; + border-bottom: 1px solid #e8e8e8; + border-left: 0; + } + + > td { + display: block; + width: 100%; + + @include media-query($table-breakpoint) { + display: table-cell; + width: initial; + height: 110px; + } + + &:first-child { + padding-top: 20px; + + @include media-query($table-breakpoint) { + padding-top: 32px; + } + } + + &:last-child { + padding-bottom: 20px; + + @include media-query($table-breakpoint) { + padding-bottom: 32px; + } + } + + &.title { + font-weight: $weight--bold; + color: #43bbf1; + + @include media-query($table-breakpoint) { + color: #404041; + } + } + + &.status_name { + span { + padding: 10px; + font-size: 12px; + color: #177da8; + background-color: #e7f2f6; + } + } + } + } + + td, + th { + padding: 5px 20px; + + @include media-query($table-breakpoint) { + padding: 30px; + } + } + + th { + padding: 20px; + font-size: 15px; + font-weight: 600; + text-align: left; + background-color: transparent; + + a { + color: #919191; + transition: color 0.25s ease-out; + } + + &.desc, + &.asc { + position: relative; + color: #404041; + + &::after { + position: absolute; + top: 25px; + margin-left: 10px; + } + + a { + color: inherit; + } + } + + &.desc { + &::after { + @include triangle(top, $color--default, 5px); + } + } + + &.asc { + &::after { + @include triangle(bottom, $color--default, 5px); + } + } + } + + tr { + background-color: #fff; + border: 1px solid #e8e8e8; + + @include media-query($table-breakpoint) { + border-top: 0; + border-right: 0; + border-bottom: 1px solid #e8e8e8; + border-left: 0; + } + + &:last-child { + border-bottom: 0; + } + } +} diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss index 0dc04da79392f8a1627c43f2e6086d7b951e27c7..85773b17411251b84acf0d8704268a4514c0c048 100755 --- a/opentech/static_src/src/sass/apply/main.scss +++ b/opentech/static_src/src/sass/apply/main.scss @@ -13,6 +13,7 @@ // Components @import 'components/button'; @import 'components/icon'; +@import 'components/table'; @import 'components/wrapper'; // Layout