You are here

Home » API reference » Open Social 8.5

button.css in Open Social 8.5

Same filename in this branch
  1. 8.5 themes/socialblue/assets/css/button.css
  2. 8.5 themes/socialbase/assets/css/button.css
Same filename and directory in other branches
  1. 8.9 themes/socialbase/assets/css/button.css
  2. 8 themes/socialbase/assets/css/button.css
  3. 8.2 themes/socialbase/assets/css/button.css
  4. 8.3 themes/socialbase/assets/css/button.css
  5. 8.4 themes/socialbase/assets/css/button.css
  6. 8.6 themes/socialbase/assets/css/button.css
  7. 8.7 themes/socialbase/assets/css/button.css
  8. 8.8 themes/socialbase/assets/css/button.css
[role="button"] {
  cursor: pointer;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: .3s ease-out;
  transition: .3s ease-out;
  outline: 0;
}

.btn + .btn {
  margin-left: 5px;
}

.btn + .btn-block {
  margin-left: 0;
}

.btn .caret {
  margin-left: 3px;
}

.btn:hover, .btn:focus, .btn.focus {
  text-decoration: none;
  outline: 0;
}

.btn:active, .btn.active {
  background-image: none;
}

.btn.disabled, .btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  opacity: .65;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn a {
  font-weight: normal;
}

.btn.btn-full {
  display: block;
}

.btn-non-clickable.disabled,
fieldset[disabled] .btn-non-clickable,
a.btn.disabled,
fieldset[disabled]
a.btn {
  pointer-events: none;
}

.btn-link {
  font-weight: normal;
}

.btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled], .btn-link:hover, .btn-link:focus,
fieldset[disabled] .btn-link {
  background-color: transparent;
  border-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn-link[disabled]:hover, .btn-link[disabled]:focus,
fieldset[disabled] .btn-link:hover,
fieldset[disabled] .btn-link:focus {
  text-decoration: none;
}

.btn--with-bgicon {
  padding-left: 32px;
  background-size: 16px 16px;
  background-position: 10px 8px;
  background-repeat: no-repeat;
}

.btn--facebook {
  background-image: url("../images/icons/icon-facebook.svg");
}

.btn--linkedin {
  background-image: url("../images/icons/icon-linkedin.svg");
}

.btn--google {
  background-image: url("../images/icons/icon-google.svg");
}

.btn--twitter {
  background-image: url("../images/icons/icon-twitter.svg");
}

.fieldset-wrapper > .btn {
  margin: 5px 5px 5px 0;
}

.btn-lg, .btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 1rem;
  line-height: 1.33333;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 0.75rem;
  line-height: 1.5;
}

.btn-sm .glyphicon:before, .btn-group-sm > .btn .glyphicon:before {
  width: 13px;
  height: 13px;
}

.btn-xs, .btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 0.75rem;
  line-height: 1.5;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.btn.pull-right + .btn {
  margin-left: 0;
}

.btn-raised {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  -webkit-transition: .15s ease-out, -webkit-box-shadow;
  transition: .15s ease-out, -webkit-box-shadow;
  transition: box-shadow, .15s ease-out;
  transition: box-shadow, .15s ease-out, -webkit-box-shadow;
}

.btn-raised:active, .btn-raised.active, .btn-raised:hover {
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
}

.btn-raised.disabled, .btn-raised[disabled] {
  -webkit-box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
          box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

.btn-icon-toggle {
  background-color: transparent;
  border-radius: 50% !important;
  padding: 4px;
}

.btn-icon-toggle:hover, .btn-icon-toggle:focus {
  background-color: rgba(0, 0, 0, 0.07);
  border-color: transparent;
}

.btn-icon-toggle:active, .btn-icon-toggle.active {
  background-color: rgba(12, 12, 12, 0.25);
  border-color: transparent;
}

.btn-icon {
  font-size: 1.00012rem;
  line-height: 21px;
  height: 21px;
  width: 21px;
  vertical-align: bottom;
}

.btn-iconized {
  line-height: 12px;
}

.btn-iconized .icon-inline {
  fill: inherit;
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.btn-floating {
  width: 38px;
  height: 38px;
  padding: 7px;
  border-radius: 50%;
  border: 0;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

.btn-floating:active, .btn-floating.active, .btn-floating:hover {
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
}

.btn-floating.btn-lg, .btn-group-lg > .btn-floating.btn {
  width: 52px;
  height: 52px;
}

.btn-floating.disabled, .btn-floating[disabled] {
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}

.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}

.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: -1px;
}

.btn-toolbar {
  margin-left: -5px;
}

.btn-toolbar:before, .btn-toolbar:after {
  content: " ";
  display: table;
}

.btn-toolbar:after {
  clear: both;
}

.btn-toolbar .btn,
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
  float: left;
}

.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
  margin-left: 5px;
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}

.btn-group > .btn:first-child {
  margin-left: 0;
}

.btn-group > .btn:first-child:not(:last-of-type):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.btn-group > .btn-group {
  float: left;
}

.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}

.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}

.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
}

.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}

.btn-group > .btn-sm + .dropdown-toggle, .btn-group-sm.btn-group > .btn + .dropdown-toggle {
  padding-left: 6px;
  padding-right: 6px;
}

.btn-group > .btn-xs + .dropdown-toggle, .btn-group-xs.btn-group > .btn + .dropdown-toggle {
  padding-left: 4px;
  padding-right: 4px;
}

.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn-lg .caret, .btn-group-lg > .btn .caret {
  border-width: 5px 5px 0;
}

.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret {
  border-width: 0 5px 5px;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}

.btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after {
  content: " ";
  display: table;
}

.btn-group-vertical > .btn-group:after {
  clear: both;
}

.btn-group-vertical > .btn-group > .btn {
  float: none;
}

.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}

.btn-group--operations {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.block-group-add-event-block,
.block-group-add-topic-block,
.block-event-add-block,
.block-topic-add-block,
.block-group-add-block {
  display: inline-block;
}

.shariff-button {
  text-align: center;
}

@media (min-width: 900px) {
  .block-group-add-event-block,
  .block-group-add-topic-block,
  .block-event-add-block,
  .block-topic-add-block,
  .block-group-add-block {
    display: block;
  }
  .block-group-add-event-block .btn,
  .block-group-add-topic-block .btn,
  .block-event-add-block .btn,
  .block-topic-add-block .btn,
  .block-group-add-block .btn {
    width: 100%;
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 899px) {
  .block-group-add-event-block,
  .block-group-add-topic-block,
  .block-event-add-block,
  .block-topic-add-block,
  .block-group-add-block {
    margin-top: 1rem;
  }
}

File

themes/socialbase/assets/css/button.css
View source 
  1. [role="button"] {

  2.   cursor: pointer;

  3. }

  4. 

  5. .btn {

  6.   display: inline-block;

  7.   margin-bottom: 0;

  8.   font-weight: normal;

  9.   text-align: center;

  10.   vertical-align: middle;

  11.   -ms-touch-action: manipulation;

  12.       touch-action: manipulation;

  13.   cursor: pointer;

  14.   background-image: none;

  15.   border: 1px solid transparent;

  16.   padding: 6px 12px;

  17.   font-size: 0.875rem;

  18.   line-height: 1.5;

  19.   -webkit-user-select: none;

  20.      -moz-user-select: none;

  21.       -ms-user-select: none;

  22.           user-select: none;

  23.   -webkit-transition: .3s ease-out;

  24.   transition: .3s ease-out;

  25.   outline: 0;

  26. }

  27. 

  28. .btn + .btn {

  29.   margin-left: 5px;

  30. }

  31. 

  32. .btn + .btn-block {

  33.   margin-left: 0;

  34. }

  35. 

  36. .btn .caret {

  37.   margin-left: 3px;

  38. }

  39. 

  40. .btn:hover, .btn:focus, .btn.focus {

  41.   text-decoration: none;

  42.   outline: 0;

  43. }

  44. 

  45. .btn:active, .btn.active {

  46.   background-image: none;

  47. }

  48. 

  49. .btn.disabled, .btn[disabled],

  50. fieldset[disabled] .btn {

  51.   cursor: not-allowed;

  52.   opacity: .65;

  53.   -webkit-box-shadow: none;

  54.           box-shadow: none;

  55. }

  56. 

  57. .btn a {

  58.   font-weight: normal;

  59. }

  60. 

  61. .btn.btn-full {

  62.   display: block;

  63. }

  64. 

  65. .btn-non-clickable.disabled,

  66. fieldset[disabled] .btn-non-clickable,

  67. a.btn.disabled,

  68. fieldset[disabled]

  69. a.btn {

  70.   pointer-events: none;

  71. }

  72. 

  73. .btn-link {

  74.   font-weight: normal;

  75. }

  76. 

  77. .btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled], .btn-link:hover, .btn-link:focus,

  78. fieldset[disabled] .btn-link {

  79.   background-color: transparent;

  80.   border-color: transparent;

  81.   -webkit-box-shadow: none;

  82.           box-shadow: none;

  83. }

  84. 

  85. .btn-link[disabled]:hover, .btn-link[disabled]:focus,

  86. fieldset[disabled] .btn-link:hover,

  87. fieldset[disabled] .btn-link:focus {

  88.   text-decoration: none;

  89. }

  90. 

  91. .btn--with-bgicon {

  92.   padding-left: 32px;

  93.   background-size: 16px 16px;

  94.   background-position: 10px 8px;

  95.   background-repeat: no-repeat;

  96. }

  97. 

  98. .btn--facebook {

  99.   background-image: url("../images/icons/icon-facebook.svg");

  100. }

  101. 

  102. .btn--linkedin {

  103.   background-image: url("../images/icons/icon-linkedin.svg");

  104. }

  105. 

  106. .btn--google {

  107.   background-image: url("../images/icons/icon-google.svg");

  108. }

  109. 

  110. .btn--twitter {

  111.   background-image: url("../images/icons/icon-twitter.svg");

  112. }

  113. 

  114. .fieldset-wrapper > .btn {

  115.   margin: 5px 5px 5px 0;

  116. }

  117. 

  118. .btn-lg, .btn-group-lg > .btn {

  119.   padding: 10px 16px;

  120.   font-size: 1rem;

  121.   line-height: 1.33333;

  122. }

  123. 

  124. .btn-sm, .btn-group-sm > .btn {

  125.   padding: 5px 10px;

  126.   font-size: 0.75rem;

  127.   line-height: 1.5;

  128. }

  129. 

  130. .btn-sm .glyphicon:before, .btn-group-sm > .btn .glyphicon:before {

  131.   width: 13px;

  132.   height: 13px;

  133. }

  134. 

  135. .btn-xs, .btn-group-xs > .btn {

  136.   padding: 1px 5px;

  137.   font-size: 0.75rem;

  138.   line-height: 1.5;

  139. }

  140. 

  141. .btn-block {

  142.   display: block;

  143.   width: 100%;

  144. }

  145. 

  146. .btn-block + .btn-block {

  147.   margin-top: 5px;

  148. }

  149. 

  150. input[type="submit"].btn-block,

  151. input[type="reset"].btn-block,

  152. input[type="button"].btn-block {

  153.   width: 100%;

  154. }

  155. 

  156. .btn.pull-right + .btn {

  157.   margin-left: 0;

  158. }

  159. 

  160. .btn-raised {

  161.   -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);

  162.           box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);

  163.   -webkit-transition: .15s ease-out, -webkit-box-shadow;

  164.   transition: .15s ease-out, -webkit-box-shadow;

  165.   transition: box-shadow, .15s ease-out;

  166.   transition: box-shadow, .15s ease-out, -webkit-box-shadow;

  167. }

  168. 

  169. .btn-raised:active, .btn-raised.active, .btn-raised:hover {

  170.   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);

  171.           box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);

  172. }

  173. 

  174. .btn-raised.disabled, .btn-raised[disabled] {

  175.   -webkit-box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);

  176.           box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);

  177. }

  178. 

  179. .btn-icon-toggle {

  180.   background-color: transparent;

  181.   border-radius: 50% !important;

  182.   padding: 4px;

  183. }

  184. 

  185. .btn-icon-toggle:hover, .btn-icon-toggle:focus {

  186.   background-color: rgba(0, 0, 0, 0.07);

  187.   border-color: transparent;

  188. }

  189. 

  190. .btn-icon-toggle:active, .btn-icon-toggle.active {

  191.   background-color: rgba(12, 12, 12, 0.25);

  192.   border-color: transparent;

  193. }

  194. 

  195. .btn-icon {

  196.   font-size: 1.00012rem;

  197.   line-height: 21px;

  198.   height: 21px;

  199.   width: 21px;

  200.   vertical-align: bottom;

  201. }

  202. 

  203. .btn-iconized {

  204.   line-height: 12px;

  205. }

  206. 

  207. .btn-iconized .icon-inline {

  208.   fill: inherit;

  209.   width: 24px;

  210.   height: 24px;

  211.   line-height: 24px;

  212. }

  213. 

  214. .btn-floating {

  215.   width: 38px;

  216.   height: 38px;

  217.   padding: 7px;

  218.   border-radius: 50%;

  219.   border: 0;

  220.   -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);

  221.           box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);

  222. }

  223. 

  224. .btn-floating:active, .btn-floating.active, .btn-floating:hover {

  225.   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);

  226.           box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);

  227. }

  228. 

  229. .btn-floating.btn-lg, .btn-group-lg > .btn-floating.btn {

  230.   width: 52px;

  231.   height: 52px;

  232. }

  233. 

  234. .btn-floating.disabled, .btn-floating[disabled] {

  235.   -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);

  236.           box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);

  237. }

  238. 

  239. .btn-group,

  240. .btn-group-vertical {

  241.   position: relative;

  242.   display: inline-block;

  243.   vertical-align: middle;

  244. }

  245. 

  246. .btn-group > .btn,

  247. .btn-group-vertical > .btn {

  248.   position: relative;

  249.   float: left;

  250. }

  251. 

  252. .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,

  253. .btn-group-vertical > .btn:hover,

  254. .btn-group-vertical > .btn:focus,

  255. .btn-group-vertical > .btn:active,

  256. .btn-group-vertical > .btn.active {

  257.   z-index: 2;

  258. }

  259. 

  260. .btn-group .btn + .btn,

  261. .btn-group .btn + .btn-group,

  262. .btn-group .btn-group + .btn,

  263. .btn-group .btn-group + .btn-group {

  264.   margin-left: -1px;

  265. }

  266. 

  267. .btn-toolbar {

  268.   margin-left: -5px;

  269. }

  270. 

  271. .btn-toolbar:before, .btn-toolbar:after {

  272.   content: " ";

  273.   display: table;

  274. }

  275. 

  276. .btn-toolbar:after {

  277.   clear: both;

  278. }

  279. 

  280. .btn-toolbar .btn,

  281. .btn-toolbar .btn-group,

  282. .btn-toolbar .input-group {

  283.   float: left;

  284. }

  285. 

  286. .btn-toolbar > .btn,

  287. .btn-toolbar > .btn-group,

  288. .btn-toolbar > .input-group {

  289.   margin-left: 5px;

  290. }

  291. 

  292. .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {

  293.   border-radius: 0;

  294. }

  295. 

  296. .btn-group > .btn:first-child {

  297.   margin-left: 0;

  298. }

  299. 

  300. .btn-group > .btn:first-child:not(:last-of-type):not(.dropdown-toggle) {

  301.   border-bottom-right-radius: 0;

  302.   border-top-right-radius: 0;

  303. }

  304. 

  305. .btn-group > .btn:last-child:not(:first-child),

  306. .btn-group > .dropdown-toggle:not(:first-child) {

  307.   border-bottom-left-radius: 0;

  308.   border-top-left-radius: 0;

  309. }

  310. 

  311. .btn-group > .btn-group {

  312.   float: left;

  313. }

  314. 

  315. .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {

  316.   border-radius: 0;

  317. }

  318. 

  319. .btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,

  320. .btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {

  321.   border-bottom-right-radius: 0;

  322.   border-top-right-radius: 0;

  323. }

  324. 

  325. .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {

  326.   border-bottom-left-radius: 0;

  327.   border-top-left-radius: 0;

  328. }

  329. 

  330. .btn-group .dropdown-toggle:active,

  331. .btn-group.open .dropdown-toggle {

  332.   outline: 0;

  333. }

  334. 

  335. .btn-group > .btn + .dropdown-toggle {

  336.   padding-left: 8px;

  337.   padding-right: 8px;

  338. }

  339. 

  340. .btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle {

  341.   padding-left: 12px;

  342.   padding-right: 12px;

  343. }

  344. 

  345. .btn-group > .btn-sm + .dropdown-toggle, .btn-group-sm.btn-group > .btn + .dropdown-toggle {

  346.   padding-left: 6px;

  347.   padding-right: 6px;

  348. }

  349. 

  350. .btn-group > .btn-xs + .dropdown-toggle, .btn-group-xs.btn-group > .btn + .dropdown-toggle {

  351.   padding-left: 4px;

  352.   padding-right: 4px;

  353. }

  354. 

  355. .btn-group.open .dropdown-toggle.btn-link {

  356.   -webkit-box-shadow: none;

  357.           box-shadow: none;

  358. }

  359. 

  360. .btn-lg .caret, .btn-group-lg > .btn .caret {

  361.   border-width: 5px 5px 0;

  362. }

  363. 

  364. .dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret {

  365.   border-width: 0 5px 5px;

  366. }

  367. 

  368. .btn-group-vertical > .btn,

  369. .btn-group-vertical > .btn-group,

  370. .btn-group-vertical > .btn-group > .btn {

  371.   display: block;

  372.   float: none;

  373.   width: 100%;

  374.   max-width: 100%;

  375. }

  376. 

  377. .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after {

  378.   content: " ";

  379.   display: table;

  380. }

  381. 

  382. .btn-group-vertical > .btn-group:after {

  383.   clear: both;

  384. }

  385. 

  386. .btn-group-vertical > .btn-group > .btn {

  387.   float: none;

  388. }

  389. 

  390. .btn-group-vertical > .btn + .btn,

  391. .btn-group-vertical > .btn + .btn-group,

  392. .btn-group-vertical > .btn-group + .btn,

  393. .btn-group-vertical > .btn-group + .btn-group {

  394.   margin-top: -1px;

  395.   margin-left: 0;

  396. }

  397. 

  398. .btn-group--operations {

  399.   width: 100%;

  400.   display: -webkit-box;

  401.   display: -ms-flexbox;

  402.   display: flex;

  403.   -webkit-box-pack: center;

  404.       -ms-flex-pack: center;

  405.           justify-content: center;

  406. }

  407. 

  408. .block-group-add-event-block,

  409. .block-group-add-topic-block,

  410. .block-event-add-block,

  411. .block-topic-add-block,

  412. .block-group-add-block {

  413.   display: inline-block;

  414. }

  415. 

  416. .shariff-button {

  417.   text-align: center;

  418. }

  419. 

  420. @media (min-width: 900px) {

  421.   .block-group-add-event-block,

  422.   .block-group-add-topic-block,

  423.   .block-event-add-block,

  424.   .block-topic-add-block,

  425.   .block-group-add-block {

  426.     display: block;

  427.   }

  428.   .block-group-add-event-block .btn,

  429.   .block-group-add-topic-block .btn,

  430.   .block-event-add-block .btn,

  431.   .block-topic-add-block .btn,

  432.   .block-group-add-block .btn {

  433.     width: 100%;

  434.     margin-bottom: 0.75rem;

  435.   }

  436. }

  437. 

  438. @media (max-width: 899px) {

  439.   .block-group-add-event-block,

  440.   .block-group-add-topic-block,

  441.   .block-event-add-block,

  442.   .block-topic-add-block,

  443.   .block-group-add-block {

  444.     margin-top: 1rem;

  445.   }

  446. }