틀:탭/styles.css: 두 판 사이의 차이

2023년 1월 5일 (목) 07:18 판

.libre-tab .libre-tab-btns {

   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin: 1rem auto 2.5em;
   justify-content: center;

}

.libre-tab .libre-tab-btn {

   position: relative;
   display: grid;
   flex: 1 auto;
   padding: 0.4rem;
   text-align: center;
   word-break: keep-all;
   align-items: center;
   max-width: 14rem;
   cursor: pointer;
   border-bottom: 2px solid #e1e8ed;
   transition: 0.2s;

} @media (min-width: 544px) {

   .libre-tab .libre-tab-btns {
       max-width: 90%;
   }

}

.libre-tab .libre-tab-btn-active, .libre-tab .libre-tab-btn:hover {

   font-weight: bold;

} @media (hover: hover) and (pointer: fine) {

   .libre-tab .libre-tab-btn:hover {
       background: rgba(213,225,230,0.35);
   }

}

.libre-tab .libre-tab-btn-active::before, .libre-tab .libre-tab-btn:hover::before {

   position: absolute;
   left: 0;
   bottom: 0;
   content: ' ';
   width: 100%;
   display: block;
   border-bottom: 2px solid #4188F1;
   margin-bottom: -2px;

}

.libre-tab .libre-tab-main {

   border: 1px solid #e1e8ed;
   padding: 1.5rem;

}

.libre-tab .libre-tab-main-content {

   display: none;

}

.libre-tab .libre-tab-main-content-active {

   display: block;

}