orbit_demo_new_old/assets/stylesheets/template/modules/universal-table.scss

660 lines
13 KiB
SCSS

@charset "utf-8";
@import "../initial";
.universal-form-inline{
position: relative;
}
.universal-table-index tbody{
width:100% ;
}
.universal-table-show{
.view_count > i:before{
content: "\f019"!important;
margin: 0.5em;
padding: 0.5em;
border-radius: 1em;
}
}
.universal-table-index{
.view_count > i:before{
content: "\f019"!important;
margin: 0.5em;
padding: 0.5em;
border-radius: 1em;
}
}
.universal-table-index{
tr{
background-color: #fff!important;
}
}
.searchbox2 .row > div{
width: 100%!important;
}
.universal-table-index caption {
width: 100%;
position: relative;
@media(max-width:$screen-xs){
}
}
.universal-btn{
position: relative;
right: 0;
}
.universal-form-inline .searchbtn.ken-click {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.universal-table-index h3 {
@extend .unity-title;
float: left;
margin: 0;
}
.btn .caret{
color: #858585;
}
.universal-table-show{
@media(max-width: $screen-xs){
display: flex;
flex-wrap: wrap;
width: 100%;
tr{
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid #ccc;
margin-bottom: 10px;
}
td{
width:100%!important;
}
th{
width: 100%!important;
}
}
}
.universal-table-index{
@media(max-width: $screen-xs){
display: flex;
flex-wrap: wrap;
width: 100%;
border:0!important;
tr{
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid #ccc;
margin-bottom: 10px;
}
td{
width: 100%;
}
th{
width: 100%;
}
}
}
.theadsearch .universal-th-icon, .theadsearch .universal-dropdown {
display: none !important;
}
.searchbtn{
cursor: pointer;
padding: 0;
position: absolute;
right:0;
z-index:2;
@media(max-width: $screen-xs){
margin-top: 0.5em;
right:0;
top:0;
position: relative;
float: right;
margin-bottom: 0.5em;
}
.searchbtn2, .universal-btn {
line-height: 2em;
padding: 2px 15px 2px 15px;
font-size: 1em;
border-radius: 5px;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
color:#fff;
font-weight: 400;
letter-spacing: 0;
margin-left: 1em;
i {
color: #fff;
}
&:hover{
color: #fff;
i {
color: #fff;
}
}
}
.searchbtn2{
background-position: 10px center;
display: inline-block;
background-color: $theme-color-second;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
text-align: center;
border: 0;
&:hover{
background-color:$theme-color-third;
}
}
i{
color: #fff;
}
}
.theadsearch2{
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
.submit-btn-wrap{
padding: 0;
}
.dropdown-menu {
right: 0;
left: unset;
position: relative;
padding: 0 5px;
background-color: transparent;
box-shadow: none;
border: 0;
display: block;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0;
}
.row > div {
border-radius: 5px;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
border: 1px solid #CCC;
padding: 0.5em 0.9375em;
font-weight: bold;
@media (max-width: 991px) {
margin-bottom: 5px;
}
}
.row > div {
// width: 100%;
}
@media (max-width: 991px) {
.submit-btn-wrap {
padding-right: 0;
}
}
.universal-th-text,.universal-th-icon{
color: #333!important;
}
@media (min-width: 769px) {
.form-group {
width: 100%;
.form-control {
width: 100%;
}
}
}
}
.searchbox{
display: none;
margin-top: 1em;
z-index: 1;
position: relative;
width: 100%;
clear: both;
.fa-search{
color: #333!important;
}
}
.universal-dropdown{
float: right;
}
.theadsearch{
width: 100%;
}
.column_entry_files{
padding-left:0;
}
.column_entry_file{
list-style: none;
}
// .ken-click2{
// margin-top:-3em;
// -webkit-transition: .3s all ease;
// -o-transition: .3s all ease;
// transition: .3s all ease;
// }
.submit-btn-wrap{
@media(min-width:769px){
margin-top: 3em;
}
}
.universal-table-index.table td{
padding: 15px 10px!important;
}
.universal-table-index1{
table-layout: auto !important;
.col-ken{
@media(min-width: $screen-xs){
width: auto!important;
}
}
@media(min-width: $screen-xs){
.universal-th-icon{
padding:5px!important;
}
.universal-dropdown{
.btn{
padding: 0.3125em!important;
}
}
.universal-th-text{
display: block!important;
clear: both;
}
}
}
.universal-table-index3{
table-layout: auto !important;
.col-ken{
@media(min-width: $screen-xs){
width: auto!important;
}
}
@media(min-width: $screen-xs){
.universal-th-icon{
padding:5px!important;
}
.universal-dropdown{
.btn{
padding: 0.3125em!important;
}
}
.universal-th-text{
display: block!important;
clear: both;
}
}
}
.universal-table-index2{
table-layout: auto !important;
.col-ken{
@media(min-width: $screen-xs){
width: auto!important;
}
}
@media(min-width: $screen-xs){
.universal-th-icon{
padding:5px!important;
}
.universal-dropdown{
.btn{
padding: 0.3125em!important;
}
}
.universal-th-text{
display: block!important;
clear: both;
}
}
}
.universal-table-index4{
table-layout: auto !important;
.col-ken{
@media(min-width: $screen-xs){
width: auto!important;
}
}
@media(min-width: $screen-xs){
.universal-th-icon{
padding:5px!important;
}
.universal-dropdown{
.btn{
padding: 0.3125em!important;
}
}
.universal-th-text{
display: block!important;
clear: both;
}
}
}
@media (max-width: 768px) {
#hashtag-wordcloud {
width: 800px!important;
height: 500px!important;
}
/* 讓外層容器可以左右滑動 */
#hashtag-wordcloud-wrapper {
overflow-x: auto;
width: 100%;
}
}
#hashtag-wordcloud{
margin-top: 1.5em;
position: relative;
margin:1.5em auto;
width: 80%;
height:400px;
overflow: hidden;
a{
border-radius: 0.5em;
padding: 0.2em;
&:hover{
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
filter: brightness(0.4) saturate(1.3);
transform: scale(1.1);
}
}
}
img.image-preview {
max-width: 100px;
}
.universal-form-inline5{
.tdken{
@media(min-width:820px){
width: calc(50% - 1em) !important;
}
@media(min-width:768px)and(max-width:820px){
width: calc(50% - 1em) !important;
}
&:hover{
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-webkit-transition: all .3sease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3sease;
.fa-thumbtack{
transform: scale(1.1) rotate(45deg);
}
i{
color:$theme-color-second;
transform: scale(1.1) ;
-webkit-transition: all .3sease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3sease;
}
}
}
.universal-table-index{
border:0;
}
.theadsearch{
display: none;
}
.universal-th-text{
padding: 0;
}
.image-preview {
width: 80px;
}
td,th{
width: 100%!important;
}
.kentbody{
display: flex;
flex-wrap: wrap;
}
tbody{
// display: flex;
// flex-wrap: wrap;
justify-content: center;
tr{
padding:18px 20px 25px 20px;
background-color: #fff;
box-shadow: 0 2px 8px 0px #999;
border-radius:30px;
margin: 0.5em;
position: relative;
min-height: 12em;
}
td{
border:0!important;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 0 !important;
color: #0757A0;
font-size: 1.4rem;
a{
color: #2D9349;
font-size:medium;
}
&:nth-child(2){
font-size: 1.5rem;
color: #333;
font-weight: 500;
margin-bottom: 0.5em;
}
&:nth-child(5){
color: #00F;
}
}
}
.fa-thumbtack{
transform: rotate(45deg);position: absolute;right: 2em;
}
}
.universal-form-inline6{
.tdken{
@media(min-width:820px){
width: calc(33.3% - 1em) !important;
}
@media(min-width:768px)and(max-width:820px){
width: calc(50% - 1em) !important;
}
&:hover{
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-webkit-transition: all .3sease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3sease;
.fa-thumbtack{
transform: scale(1.1) rotate(45deg);
}
i{
color:$theme-color-second;
transform: scale(1.1) ;
-webkit-transition: all .3sease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3sease;
}
}
}
.universal-table-index{
border:0;
}
.theadsearch{
display: none;
}
.universal-th-text{
padding: 0;
}
.image-preview {
width: 80px;
}
td,th{
width: 100%!important;
}
.kentbody{
display: flex;
flex-wrap: wrap;
}
tbody{
// display: flex;
// flex-wrap: wrap;
justify-content: center;
tr{
padding:18px 20px 25px 20px;
background-color: #fff;
box-shadow: 0 2px 8px 0px #999;
border-radius:30px;
margin: 0.5em;
position: relative;
min-height: 12em;
}
td{
border:0!important;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 0 !important;
color: #0757A0;
font-size: 1.4rem;
a{
color: #2D9349;
font-size:medium;
}
&:nth-child(2){
font-size: 1.5rem;
color: #333;
font-weight: 500;
margin-bottom: 0.5em;
}
&:nth-child(5){
color: #00F;
}
}
}
.fa-thumbtack{
transform: rotate(45deg);position: absolute;right: 2em;
}
}
// .universal-table-show {
// border-collapse: collapse;
// .table-content{
// table{
// border: 0;
// }
// tbody > tr:nth-of-type(even) {
// background-color: #cccccc30;
// }
// td{
// border-bottom: 1px #333 solid;
// }
// }
// td{
// border-top:0!important;
// min-width: 7em;
// border-left: 0 !important;
// border-right: 0 !important;
// }
// .universal-table-show.table td{
// padding: 15px 18px;
// }
// tbody>tr:nth-of-type(odd){
// background-color:transparent;
// }
// .table-content{
// min-width: 100%!important;
// }
// .universal-table-tr{
// display: flex;
// flex-wrap: wrap;
// justify-content: center;
// width: 100%;
// &:first-child{
// display:none;
// }
// &:nth-child(2){
// .table-title{
// display: none;
// }
// .table-content{
// padding-top: 1em;
// width: 100%;
// color: #173463;
// font-size: 2.2rem;
// font-weight: 900;
// text-align: center;
// padding-bottom: 0;
// }
// }
// &:nth-child(3){
// .table-title{
// display: none;
// }
// .table-content{
// width: 100%;
// color: #e66b28;
// font-size: 2.2rem;
// font-weight: 900;
// text-align: center;
// padding-top: 0;
// }
// }
// &:nth-child(4){
// .table-title{
// display: none;
// }
// .table-content{
// margin-bottom: 1em;
// }
// }
// &:nth-child(5){
// .table-title{
// display: none;
// }
// }
// }
// .table-content{
// background-color: #fff;
// padding: 0;
// }
// .table-title{
// width: 100%;
// padding: 30px 0;
// color: #2D9349;
// font-size: 1.8rem;
// font-weight: 600;
// }
// }