madosel/dist/css/madosel-component.css

The most and fast advanced responsive html front-end framework.

@charset "UTF-8";
/*!
 * Madosel Component 1.0.0-alpha12
 * Copyright 2020-2021 Kenan Gündoğan
 * https://www.madosel.com
 * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE
 * Released under the MIT License
 */
/*!
 * Madosel Accordion 1.0.0-alpha12
 * Copyright 2020-2021 Kenan Gündoğan
 * https://www.madosel.com
 * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE
 * Released under the MIT License
 */
.accordion-container {
  position: relative;
  width: 100%;
}
.accordion-container .accordion-item {
  overflow: hidden;
  min-height: 70px;
  margin-bottom: 10px;
  border: dashed 1px #dedede;
  border-radius: 5px;
}
.accordion-container .accordion-item.show {
  background-color: #fef8e1;
}
.accordion-container .accordion-item.show .head i {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.04 9.26'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='path1245-9'%3E%3Cpath d='M180.41,9.26H4.63A4.63,4.63,0,0,1,4.63,0H180.41a4.63,4.63,0,0,1,0,9.26Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center/50%;
}
.accordion-container .accordion-item.show .body {
  display: block;
}
.accordion-container .accordion-item .head {
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 20px;
  cursor: pointer;
}
.accordion-container .accordion-item .head i {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.04 185.04'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M180.41,87.89H97.15V4.63a4.63,4.63,0,0,0-9.26,0V87.89H4.63a4.63,4.63,0,0,0,0,9.26H87.89v83.26a4.63,4.63,0,0,0,9.26,0V97.15h83.26a4.63,4.63,0,0,0,0-9.26Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center/50%;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  margin-right: 10px;
  background-color: #fff;
}
.accordion-container .accordion-item .body {
  display: none;
  overflow: hidden;
  height: 0;
}
.accordion-container .accordion-item .body .wrapper {
  position: relative;
  overflow: hidden;
  padding: 0 20px 20px 60px;
  border-radius: 5px;
}

/*!
 * Madosel Dropdown 1.0.0-alpha12
 * Copyright 2020-2021 Kenan Gündoğan
 * https://www.madosel.com
 * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE
 * Released under the MIT License
 */
.dropdown-container {
  position: relative;
  display: inline-block;
}
.dropdown-container .dropdown-btn {
  cursor: pointer;
  padding: 15px;
  text-align: center;
  border: solid 1px #dedede;
  border-radius: 5px;
  background-color: #fff;
  outline: none;
}
.dropdown-container .dropdown-list {
  position: absolute;
  z-index: 1000;
  overflow: auto;
  padding: 7.5px 0;
  border: solid 1px #dedede;
  border-radius: 5px;
  white-space: nowrap;
  background-color: #fff;
}
.dropdown-container .dropdown-list:not(.show) {
  display: none;
}
.dropdown-container .dropdown-list .dropdown-item a {
  display: block;
  padding: 7.5px 15px;
}

/*!
 * Madosel Modal 1.0.0-alpha12
 * Copyright 2020-2021 Kenan Gündoğan
 * https://www.madosel.com
 * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE
 * Released under the MIT License
 */
.modal-container {
  position: fixed;
  overflow: hidden;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px;
  background-color: rgba(0, 0, 0, 0);
  display: none;
  transition: ease 300ms;
}
.modal-container.show {
  display: flex;
}
.modal-container.visible {
  background-color: rgba(0, 0, 0, 0.6);
}
.modal-container.visible .modal-wrapper {
  opacity: 1;
}
.modal-container.center {
  justify-content: center;
  align-items: center;
}
.modal-container.center .modal-wrapper {
  transform: translate(0, -50px);
}
.modal-container.top {
  justify-content: center;
  align-items: flex-start;
}
.modal-container.top .modal-wrapper {
  transform: translate(0, -50px);
}
.modal-container.bottom {
  justify-content: center;
  align-items: flex-end;
}
.modal-container.bottom .modal-wrapper {
  transform: translate(0, 50px);
}
.modal-container.top-left {
  justify-content: flex-start;
  align-items: flex-start;
}
.modal-container.top-left .modal-wrapper {
  transform: translate(-50px, 0);
}
.modal-container.top-right {
  justify-content: flex-end;
  align-items: flex-start;
}
.modal-container.top-right .modal-wrapper {
  transform: translate(50px, 0);
}
.modal-container.bottom-left {
  justify-content: flex-start;
  align-items: flex-end;
}
.modal-container.bottom-left .modal-wrapper {
  transform: translate(-50px, 0);
}
.modal-container.bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
}
.modal-container.bottom-right .modal-wrapper {
  transform: translate(50px, 0);
}
.modal-container.small .modal-wrapper {
  max-width: 300px;
}
.modal-container.medium .modal-wrapper {
  max-width: 600px;
}
.modal-container.large .modal-wrapper {
  max-width: 1024px;
}
.modal-container.xlarge .modal-wrapper {
  max-width: 1280px;
}
.modal-container.full .modal-wrapper {
  max-width: 100%;
}
.modal-container.fullscreen {
  padding: 0;
}
.modal-container.fullscreen .modal-wrapper {
  max-width: 100%;
  height: 100%;
}
.modal-container.transform .modal-wrapper {
  transform: none;
}
.modal-container .modal-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  border-radius: 5px;
  padding: 40px;
  background-color: #fff;
  opacity: 0;
}
.modal-container .modal-wrapper .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.15 185.15'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='Path_2925' data-name='Path 2925'%3E%3Cpath d='M99.1,92.59,183.76,7.94a4.64,4.64,0,0,0-6.49-6.62l-.06.07L92.56,86,7.9,1.39A4.63,4.63,0,0,0,1.36,7.94L86,92.59,1.36,177.24a4.63,4.63,0,0,0,6.54,6.55L92.56,99.14l84.65,84.65a4.63,4.63,0,0,0,6.55-6.55h0Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center/50%;
}

/*!
 * Madosel Navigation Tabs 1.0.0-alpha12
 * Copyright 2020-2021 Kenan Gündoğan
 * https://www.madosel.com
 * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE
 * Released under the MIT License
 */
.navigation-tabs-container {
  position: relative;
  width: 100%;
}
.navigation-tabs-container .navigation-tab-menu {
  position: relative;
  width: 100%;
  display: flex;
}
.navigation-tabs-container .navigation-tab-menu .navigation-tab-menu-item {
  position: relative;
  min-height: 70px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 20px;
  cursor: pointer;
  border: dashed 1px #dedede;
  white-space: pre;
}
.navigation-tabs-container .navigation-tab-menu .navigation-tab-menu-item.show {
  background-color: #fef8e1;
}
.navigation-tabs-container .navigation-tab-menu .navigation-tab-menu-item.show:before {
  content: "";
  position: absolute;
  z-index: 10;
  background-color: #fef8e1;
}
.navigation-tabs-container .navigation-tab-content .navigation-tab-content-item {
  display: none;
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: dashed 1px #dedede;
  border-radius: 5px;
}
.navigation-tabs-container .navigation-tab-content .navigation-tab-content-item.show {
  display: block;
  background-color: #fef8e1;
}
.navigation-tabs-container.top .navigation-tab-menu .navigation-tab-menu-item {
  margin: 0 10px 10px 0;
}
.navigation-tabs-container.top .navigation-tab-menu .navigation-tab-menu-item.show:before {
  left: -1px;
  bottom: -12px;
  width: 100%;
  height: 30px;
  border-left: dashed 1px #dedede;
  border-right: dashed 1px #dedede;
}
.navigation-tabs-container.right {
  display: flex;
  flex-direction: row-reverse;
}
.navigation-tabs-container.right .navigation-tab-menu {
  flex-direction: column;
}
.navigation-tabs-container.right .navigation-tab-menu .navigation-tab-menu-item {
  margin: 0 0 10px 10px;
}
.navigation-tabs-container.right .navigation-tab-menu .navigation-tab-menu-item.show:before {
  top: -1px;
  left: -12px;
  width: 30px;
  height: 100%;
  border-top: dashed 1px #dedede;
  border-bottom: dashed 1px #dedede;
}
.navigation-tabs-container.bottom {
  display: flex;
  flex-direction: column-reverse;
}
.navigation-tabs-container.bottom .navigation-tab-menu .navigation-tab-menu-item {
  margin: 10px 10px 0 0;
}
.navigation-tabs-container.bottom .navigation-tab-menu .navigation-tab-menu-item.show:before {
  left: -1px;
  top: -12px;
  width: 100%;
  height: 30px;
  border-left: dashed 1px #dedede;
  border-right: dashed 1px #dedede;
}
.navigation-tabs-container.left {
  display: flex;
}
.navigation-tabs-container.left .navigation-tab-menu {
  flex-direction: column;
}
.navigation-tabs-container.left .navigation-tab-menu .navigation-tab-menu-item {
  margin: 0 10px 10px 0;
}
.navigation-tabs-container.left .navigation-tab-menu .navigation-tab-menu-item.show:before {
  top: -1px;
  right: -12px;
  width: 30px;
  height: 100%;
  border-top: dashed 1px #dedede;
  border-bottom: dashed 1px #dedede;
}

/*!
 * Madosel Offcanvas 1.0.0-alpha12
 * Copyright 2020-2021 Kenan Gündoğan
 * https://www.madosel.com
 * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE
 * Released under the MIT License
 */
.offcanvas-container {
  position: fixed;
  overflow: hidden;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: none;
  transition: ease 300ms;
}
.offcanvas-container.show {
  display: flex;
}
.offcanvas-container.visible {
  background-color: rgba(0, 0, 0, 0.6);
}
.offcanvas-container.visible .offcanvas-wrapper {
  opacity: 1;
}
.offcanvas-container.top {
  justify-content: center;
  align-items: flex-start;
}
.offcanvas-container.top .offcanvas-wrapper {
  transform: translate(0, -50px);
}
.offcanvas-container.left {
  justify-content: flex-start;
}
.offcanvas-container.left .offcanvas-wrapper {
  transform: translate(-100%, 0);
}
.offcanvas-container.right {
  justify-content: flex-end;
}
.offcanvas-container.right .offcanvas-wrapper {
  transform: translate(100%, 0);
}
.offcanvas-container.bottom {
  justify-content: center;
  align-items: flex-end;
}
.offcanvas-container.bottom .offcanvas-wrapper {
  transform: translate(0, 50px);
}
.offcanvas-container.small .offcanvas-wrapper {
  max-width: 300px;
}
.offcanvas-container.medium .offcanvas-wrapper {
  max-width: 600px;
}
.offcanvas-container.large .offcanvas-wrapper {
  max-width: 1024px;
}
.offcanvas-container.xlarge .offcanvas-wrapper {
  max-width: 1280px;
}
.offcanvas-container.full .offcanvas-wrapper {
  max-width: 100%;
}
.offcanvas-container.fullscreen .offcanvas-wrapper {
  max-width: 100%;
  height: 100%;
}
.offcanvas-container.transform .offcanvas-wrapper {
  transform: none;
}
.offcanvas-container .offcanvas-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 40px;
  background-color: #fff;
  opacity: 0;
}
.offcanvas-container .offcanvas-wrapper .offcanvas-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.15 185.15'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='Path_2925' data-name='Path 2925'%3E%3Cpath d='M99.1,92.59,183.76,7.94a4.64,4.64,0,0,0-6.49-6.62l-.06.07L92.56,86,7.9,1.39A4.63,4.63,0,0,0,1.36,7.94L86,92.59,1.36,177.24a4.63,4.63,0,0,0,6.54,6.55L92.56,99.14l84.65,84.65a4.63,4.63,0,0,0,6.55-6.55h0Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center/50%;
}

/*# sourceMappingURL=madosel-component.css.map*/