docs/table_flags/flags_style.css

0001 .markdown-section table{
0002     display: inline-table;
0003 }
0004 .table_flags{
0005     width: 100%;
0006     box-sizing: border-box;
0007     border-collapse: collapse;
0008     margin: 25px 0;
0009     min-width: 400px;
0010     box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
0011
0012 }
0013 .table_flags thead th{
0014     background-color: #009879;
0015     color: #ffffff;
0016     text-align: center;
0017     width: 33.3%;
0018 }
0019 .table_flags tbody td{
0020     text-align: left;
0021     padding: 12px 15px;
0022     width: 33.3%;
0023 }
0024
0025
0026 #myInput {
0027     background-image: url('search.png');
0028     background-position: 5px 6px;
0029     background-repeat: no-repeat;
0030     background-size: 28px;
0031     width: 100%;
0032     font-size: 16px;
0033     padding: 12px 20px 12px 40px;
0034     border: 1px solid #ddd;
0035     border-radius: 5px;
0036 }
0037 .radio_btn, .radio_btn_name{
0038     display: flex;
0039     flex-wrap: wrap;
0040     /*margin-bottom: 20px;*/
0041 }
0042 .radio_btn_name div{
0043     width: 100px;
0044     height: 50px;
0045     padding-top: 5px;
0046     text-align: center;
0047     margin-right: 10px;
0048     background-color: #009879;
0049     border-radius: 5px 5px 0 0;
0050     color: white;
0051 }
0052 .tabs {
0053     display: flex;
0054     flex-wrap: nowrap;
0055     position: relative;
0056 }
0057 .tab input[type="radio"] { display: none; }
0058 .tab-title {
0059     background: #009879;
0060     color: #ffffff;
0061     padding: 5px 10px;
0062     border: 1px solid gray;
0063     border-radius: 5px;
0064     box-sizing: border-box;
0065     margin-right: 2px;
0066     font-size: 17px;
0067 }
0068 .tab-content {
0069     position: absolute;
0070     left: 0;
0071     width: calc(100% - 0px);
0072     display: none;
0073 }
0074 .tab :checked + .tab-title {
0075     position: relative;
0076     color: black;
0077     background: #ffffff;
0078     z-index: 1;
0079     box-shadow: inset 0px -1px 0px #009879;
0080 }
0081 .tab :checked ~ .tab-content {
0082     display: block;
0083 }
0084 .inactiveMixin {
0085     content: "";
0086     position: absolute;
0087     display: block;
0088 }
0089 .beforeAnimation {
0090     -moz-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
0091     -o-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
0092     -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
0093     transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
0094 }
0095 .afterAnimation {
0096     box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
0097     -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
0098     -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
0099     -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
0100     transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
0101 }
0102 .toggleWrapper {
0103     padding-left: 20px;
0104     padding-bottom: 5px;
0105     width: 100px;
0106     margin-right: 10px;
0107     border-radius: 0 0 5px 5px;
0108     background: #009879;
0109     margin-bottom: 20px;
0110
0111 }
0112 .toggleWrapper input.mobileToggle {
0113     opacity: 0;
0114     position: absolute;
0115 }
0116 .toggleWrapper input.mobileToggle + label {
0117     position: relative;
0118     display: inline-block;
0119     user-select: none;
0120     -moz-transition: 0.4s ease;
0121     -o-transition: 0.4s ease;
0122     -webkit-transition: 0.4s ease;
0123     transition: 0.4s ease;
0124     -webkit-tap-highlight-color: transparent;
0125     height: 30px;
0126     width: 50px;
0127     border: 1px solid #e4e4e4;
0128     border-radius: 60px;
0129 }
0130 .toggleWrapper input.mobileToggle + label:before {
0131     content: "";
0132     position: absolute;
0133     display: block;
0134     -moz-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
0135     -o-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
0136     -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
0137     transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
0138     height: 30px;
0139     width: 51px;
0140     top: -1px;
0141     left: 0;
0142     border-radius: 30px;
0143 }
0144 .toggleWrapper input.mobileToggle + label:after {
0145     content: "";
0146     position: absolute;
0147     display: block;
0148     box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
0149     -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
0150     -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
0151     -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
0152     transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
0153     background: whitesmoke;
0154     height: 28px;
0155     width: 28px;
0156     top: 0;
0157     left: 0;
0158     border-radius: 60px;
0159 }
0160 .toggleWrapper input.mobileToggle:checked + label:before {
0161     background: #2ecc71;
0162     -moz-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
0163     -o-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
0164     -webkit-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
0165     transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
0166 }
0167 .toggleWrapper input.mobileToggle:checked + label:after {
0168     left: 24px;
0169 }