You are here

ckeditor-tabber.css in CKEditor Tabber 8

/*
	Tabber tabs that have not been created using Javascript
*/

/* clearfix */
dl.ckeditor-tabber:before,
dl.ckeditor-tabber:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
dl.ckeditor-tabber:after {
    clear: both;
}

/* CKEditor Tabber */
dl.ckeditor-tabber,
dl.ckeditor-tabber dt,
dl.ckeditor-tabber  dd {
	box-sizing: border-box;
}
dl.ckeditor-tabber {
	position: relative;
}

dl.ckeditor-tabber dt {
	font-weight: bold;
}

/*
	Tabber tabs that have been created using Javascript
*/

/* clearfix */
.ckeditor-tabber-tabs:before,
.ckeditor-tabber-tabs:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.ckeditor-tabber-tabs:after {
    clear: both;
}

.ckeditor-tabber-tabs {
	margin: 20px 0;
	box-sizing: border-box;
}

.ckeditor-tabber-tabs * {
	box-sizing: border-box;
}

/* tabs to switch visible content */
.ckeditor-tabber-tabs ul.ckeditor-tabs-holder,
.ckeditor-tabber-tabs ul.ckeditor-tabs-holder li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ckeditor-tabber-tabs ul.ckeditor-tabs-holder {
	position: relative;
	z-index: 2;
}

.ckeditor-tabber-tabs ul.ckeditor-tabs-holder li {
	display: inline-block;
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
}

.ckeditor-tabber-tabs ul.ckeditor-tabs-holder li a {
	padding: 10px 15px;
	display: inline-block;
	cursor: pointer;
	position: relative;
}

.ckeditor-tabber-tabs ul.ckeditor-tabs-holder li.active {
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	border-left: 1px solid #999;
    background: #fff;
}

.ckeditor-tabber-tabs ul.ckeditor-tabs-holder li.active a {
	cursor: default;
}

/* the tabbed content itself */
.ckeditor-tabber-tabs .ckeditor-tabs-content-holder {
	border: 1px solid #999;
	background: #fff;
	position: relative;
	margin-top: -1px;
	z-index: 1;
}

.ckeditor-tabber-tabs .ckeditor-tabs-content-holder .ckeditor-tab-content {
	margin: 15px;
	display: none;
}

.ckeditor-tabber-tabs .ckeditor-tabs-content-holder .ckeditor-tab-content.active {
	display: block;
}

File

css/ckeditor-tabber.css
View source
  1. /*
  2. Tabber tabs that have not been created using Javascript
  3. */
  4. /* clearfix */
  5. dl.ckeditor-tabber:before,
  6. dl.ckeditor-tabber:after {
  7. content: " "; /* 1 */
  8. display: table; /* 2 */
  9. }
  10. dl.ckeditor-tabber:after {
  11. clear: both;
  12. }
  13. /* CKEditor Tabber */
  14. dl.ckeditor-tabber,
  15. dl.ckeditor-tabber dt,
  16. dl.ckeditor-tabber dd {
  17. box-sizing: border-box;
  18. }
  19. dl.ckeditor-tabber {
  20. position: relative;
  21. }
  22. dl.ckeditor-tabber dt {
  23. font-weight: bold;
  24. }
  25. /*
  26. Tabber tabs that have been created using Javascript
  27. */
  28. /* clearfix */
  29. .ckeditor-tabber-tabs:before,
  30. .ckeditor-tabber-tabs:after {
  31. content: " "; /* 1 */
  32. display: table; /* 2 */
  33. }
  34. .ckeditor-tabber-tabs:after {
  35. clear: both;
  36. }
  37. .ckeditor-tabber-tabs {
  38. margin: 20px 0;
  39. box-sizing: border-box;
  40. }
  41. .ckeditor-tabber-tabs * {
  42. box-sizing: border-box;
  43. }
  44. /* tabs to switch visible content */
  45. .ckeditor-tabber-tabs ul.ckeditor-tabs-holder,
  46. .ckeditor-tabber-tabs ul.ckeditor-tabs-holder li {
  47. margin: 0;
  48. padding: 0;
  49. list-style: none;
  50. }
  51. .ckeditor-tabber-tabs ul.ckeditor-tabs-holder {
  52. position: relative;
  53. z-index: 2;
  54. }
  55. .ckeditor-tabber-tabs ul.ckeditor-tabs-holder li {
  56. display: inline-block;
  57. border-right: 1px solid transparent;
  58. border-left: 1px solid transparent;
  59. }
  60. .ckeditor-tabber-tabs ul.ckeditor-tabs-holder li a {
  61. padding: 10px 15px;
  62. display: inline-block;
  63. cursor: pointer;
  64. position: relative;
  65. }
  66. .ckeditor-tabber-tabs ul.ckeditor-tabs-holder li.active {
  67. border-top: 1px solid #999;
  68. border-right: 1px solid #999;
  69. border-left: 1px solid #999;
  70. background: #fff;
  71. }
  72. .ckeditor-tabber-tabs ul.ckeditor-tabs-holder li.active a {
  73. cursor: default;
  74. }
  75. /* the tabbed content itself */
  76. .ckeditor-tabber-tabs .ckeditor-tabs-content-holder {
  77. border: 1px solid #999;
  78. background: #fff;
  79. position: relative;
  80. margin-top: -1px;
  81. z-index: 1;
  82. }
  83. .ckeditor-tabber-tabs .ckeditor-tabs-content-holder .ckeditor-tab-content {
  84. margin: 15px;
  85. display: none;
  86. }
  87. .ckeditor-tabber-tabs .ckeditor-tabs-content-holder .ckeditor-tab-content.active {
  88. display: block;
  89. }