react-dyn-tabs/themes/react-dyn-tabs-classic.css

React dynamic tabs with full API

.all-themes.rc-dyn-tabs-tablist-view {
  background-color: #e7eff9;
  border-color: #bbcbde;
  border-style: solid;
  border-width: 1px;
  padding: 0.2em 0.2em 0;
  border-radius: 5px;
}
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
  border-color: #8db3e3;
  background-image: none;
  background-image: #deecfd;
  background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #ccdef6), color-stop(25%, #d6e6fa), color-stop(45%, #deecfd));
  background-image: -webkit-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
  background-image: -moz-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
  background-image: -o-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
  background-image: -ms-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
  background-image: linear-gradient(to bottom, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
  -webkit-box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
  -moz-box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
  box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
  border-radius: 5px 5px 1px 1px;
  border-style: solid;
  border-width: 1px 1px 0px 1px;
  color: #416da3;
  min-width: 100px;
}
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title.rc-dyn-tabs-showmorebutton {
  min-width: 46.38px;
}
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {
  background-image: none;
  background-image: #deecfd;
  background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #fff), color-stop(25%, #f5f9fe), color-stop(45%, #deecfd));
  background-image: -moz-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
  background-image: -o-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
  background-image: -ms-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
  background-image: linear-gradient(to bottom, #fff, #f5f9fe 25%, #deecfd 45%);
  background-image: -webkit-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
  color: #15498b;
}
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
  color: #416da3;
  margin: 0px 0.2em 0 0;
}
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
  background-image: #e8f2ff;
  background-image: -webkit-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
  background-image: -moz-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
  background-image: -o-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
  background-image: -ms-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
  background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #d7e5fd), color-stop(25%, #e0edff), color-stop(45%, #e8f2ff));
  background-image: linear-gradient(to top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
}
.all-themes.rc-dyn-tabs-tablist-view .rc-dyn-tabs-showmorebutton svg path {
  fill: #416da3;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-tab {
  margin: 0px 0 0 0.2em;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical {
  padding: 0.2em 0 0.2em 0.2em;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-tab {
  margin: 0.2em 0 0 0;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-title {
  border-width: 1px 0px 1px 1px;
  border-radius: 5px 1px 1px 5px;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-showmorebutton-container {
  margin: 0.2em 0 0 0;
  min-height: 30px;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-popper {
  padding: 0.2em;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-popper .rc-dyn-tabs-title {
  border-width: 1px;
  border-radius: 5px;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
  padding: 0.2em 0.2em 0.2em 0;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-title {
  border-width: 1px 1px 1px 0px;
  border-radius: 1px 5px 5px 1px;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl.rc-dyn-tabs-popper {
  padding: 0.2em;
}
.all-themes.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl.rc-dyn-tabs-popper .rc-dyn-tabs-title {
  border-width: 1px;
  border-radius: 5px;
}

.classic.rc-dyn-tabs-tablist-view {
  background-color: #e7eff9;
  border-color: #bbcbde;
  border-style: solid;
  border-width: 1px;
  padding: 0.2em 0.2em 0;
  border-radius: 5px;
}
.classic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
  border-color: #8db3e3;
  background-image: none;
  background-image: #deecfd;
  background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #ccdef6), color-stop(25%, #d6e6fa), color-stop(45%, #deecfd));
  background-image: -webkit-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
  background-image: -moz-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
  background-image: -o-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
  background-image: -ms-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
  background-image: linear-gradient(to bottom, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
  -webkit-box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
  -moz-box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
  box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
  border-radius: 5px 5px 1px 1px;
  border-style: solid;
  border-width: 1px 1px 0px 1px;
  color: #416da3;
  min-width: 100px;
}
.classic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title.rc-dyn-tabs-showmorebutton {
  min-width: 46.38px;
}
.classic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {
  background-image: none;
  background-image: #deecfd;
  background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #fff), color-stop(25%, #f5f9fe), color-stop(45%, #deecfd));
  background-image: -moz-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
  background-image: -o-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
  background-image: -ms-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
  background-image: linear-gradient(to bottom, #fff, #f5f9fe 25%, #deecfd 45%);
  background-image: -webkit-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
  color: #15498b;
}
.classic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
  color: #416da3;
  margin: 0px 0.2em 0 0;
}
.classic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
  background-image: #e8f2ff;
  background-image: -webkit-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
  background-image: -moz-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
  background-image: -o-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
  background-image: -ms-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
  background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #d7e5fd), color-stop(25%, #e0edff), color-stop(45%, #e8f2ff));
  background-image: linear-gradient(to top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
}
.classic.rc-dyn-tabs-tablist-view .rc-dyn-tabs-showmorebutton svg path {
  fill: #416da3;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-tab {
  margin: 0px 0 0 0.2em;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical {
  padding: 0.2em 0 0.2em 0.2em;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-tab {
  margin: 0.2em 0 0 0;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-title {
  border-width: 1px 0px 1px 1px;
  border-radius: 5px 1px 1px 5px;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-showmorebutton-container {
  margin: 0.2em 0 0 0;
  min-height: 30px;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-popper {
  padding: 0.2em;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-popper .rc-dyn-tabs-title {
  border-width: 1px;
  border-radius: 5px;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
  padding: 0.2em 0.2em 0.2em 0;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-title {
  border-width: 1px 1px 1px 0px;
  border-radius: 1px 5px 5px 1px;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl.rc-dyn-tabs-popper {
  padding: 0.2em;
}
.classic.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl.rc-dyn-tabs-popper .rc-dyn-tabs-title {
  border-width: 1px;
  border-radius: 5px;
}