You are here

Home » API reference » Open Social 8.9

button.css in Open Social 8.9

Same filename in this branch
  1. 8.9 themes/socialblue/assets/css/button.css
  2. 8.9 themes/socialbase/assets/css/button.css
Same filename and directory in other branches
  1. 8 themes/socialbase/assets/css/button.css
  2. 8.2 themes/socialbase/assets/css/button.css
  3. 8.3 themes/socialbase/assets/css/button.css
  4. 8.4 themes/socialbase/assets/css/button.css
  5. 8.5 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;
  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;
  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;
  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;
  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 {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  transition: box-shadow, .15s ease-out;
}

.btn-raised:active, .btn-raised.active, .btn-raised:hover {
  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] {
  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;
  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 {
  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] {
  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 {
  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: flex;
  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.   touch-action: manipulation;

  12.   cursor: pointer;

  13.   background-image: none;

  14.   border: 1px solid transparent;

  15.   padding: 6px 12px;

  16.   font-size: 0.875rem;

  17.   line-height: 1.5;

  18.   -webkit-user-select: none;

  19.      -moz-user-select: none;

  20.       -ms-user-select: none;

  21.           user-select: none;

  22.   transition: .3s ease-out;

  23.   outline: 0;

  24. }

  25. 

  26. .btn + .btn {

  27.   margin-left: 5px;

  28. }

  29. 

  30. .btn + .btn-block {

  31.   margin-left: 0;

  32. }

  33. 

  34. .btn .caret {

  35.   margin-left: 3px;

  36. }

  37. 

  38. .btn:hover, .btn:focus, .btn.focus {

  39.   text-decoration: none;

  40.   outline: 0;

  41. }

  42. 

  43. .btn:active, .btn.active {

  44.   background-image: none;

  45. }

  46. 

  47. .btn.disabled, .btn[disabled],

  48. fieldset[disabled] .btn {

  49.   cursor: not-allowed;

  50.   opacity: .65;

  51.   box-shadow: none;

  52. }

  53. 

  54. .btn a {

  55.   font-weight: normal;

  56. }

  57. 

  58. .btn.btn-full {

  59.   display: block;

  60. }

  61. 

  62. .btn-non-clickable.disabled,

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

  64. a.btn.disabled,

  65. fieldset[disabled]

  66. a.btn {

  67.   pointer-events: none;

  68. }

  69. 

  70. .btn-link {

  71.   font-weight: normal;

  72. }

  73. 

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

  75. fieldset[disabled] .btn-link {

  76.   background-color: transparent;

  77.   border-color: transparent;

  78.   box-shadow: none;

  79. }

  80. 

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

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

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

  84.   text-decoration: none;

  85. }

  86. 

  87. .btn--with-bgicon {

  88.   padding-left: 32px;

  89.   background-size: 16px 16px;

  90.   background-position: 10px 8px;

  91.   background-repeat: no-repeat;

  92. }

  93. 

  94. .btn--facebook {

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

  96. }

  97. 

  98. .btn--linkedin {

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

  100. }

  101. 

  102. .btn--google {

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

  104. }

  105. 

  106. .btn--twitter {

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

  108. }

  109. 

  110. .fieldset-wrapper > .btn {

  111.   margin: 5px 5px 5px 0;

  112. }

  113. 

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

  115.   padding: 10px 16px;

  116.   font-size: 1rem;

  117.   line-height: 1.33333;

  118. }

  119. 

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

  121.   padding: 5px 10px;

  122.   font-size: 0.75rem;

  123.   line-height: 1.5;

  124. }

  125. 

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

  127.   width: 13px;

  128.   height: 13px;

  129. }

  130. 

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

  132.   padding: 1px 5px;

  133.   font-size: 0.75rem;

  134.   line-height: 1.5;

  135. }

  136. 

  137. .btn-block {

  138.   display: block;

  139.   width: 100%;

  140. }

  141. 

  142. .btn-block + .btn-block {

  143.   margin-top: 5px;

  144. }

  145. 

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

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

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

  149.   width: 100%;

  150. }

  151. 

  152. .btn.pull-right + .btn {

  153.   margin-left: 0;

  154. }

  155. 

  156. .btn-raised {

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

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

  159. }

  160. 

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

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

  163. }

  164. 

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

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

  167. }

  168. 

  169. .btn-icon-toggle {

  170.   background-color: transparent;

  171.   border-radius: 50% !important;

  172.   padding: 4px;

  173. }

  174. 

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

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

  177.   border-color: transparent;

  178. }

  179. 

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

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

  182.   border-color: transparent;

  183. }

  184. 

  185. .btn-icon {

  186.   font-size: 1.00012rem;

  187.   line-height: 21px;

  188.   height: 21px;

  189.   width: 21px;

  190.   vertical-align: bottom;

  191. }

  192. 

  193. .btn-iconized {

  194.   line-height: 12px;

  195. }

  196. 

  197. .btn-iconized .icon-inline {

  198.   fill: inherit;

  199.   width: 24px;

  200.   height: 24px;

  201.   line-height: 24px;

  202. }

  203. 

  204. .btn-floating {

  205.   width: 38px;

  206.   height: 38px;

  207.   padding: 7px;

  208.   border-radius: 50%;

  209.   border: 0;

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

  211. }

  212. 

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

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

  215. }

  216. 

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

  218.   width: 52px;

  219.   height: 52px;

  220. }

  221. 

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

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

  224. }

  225. 

  226. .btn-group,

  227. .btn-group-vertical {

  228.   position: relative;

  229.   display: inline-block;

  230.   vertical-align: middle;

  231. }

  232. 

  233. .btn-group > .btn,

  234. .btn-group-vertical > .btn {

  235.   position: relative;

  236.   float: left;

  237. }

  238. 

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

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

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

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

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

  244.   z-index: 2;

  245. }

  246. 

  247. .btn-group .btn + .btn,

  248. .btn-group .btn + .btn-group,

  249. .btn-group .btn-group + .btn,

  250. .btn-group .btn-group + .btn-group {

  251.   margin-left: -1px;

  252. }

  253. 

  254. .btn-toolbar {

  255.   margin-left: -5px;

  256. }

  257. 

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

  259.   content: " ";

  260.   display: table;

  261. }

  262. 

  263. .btn-toolbar:after {

  264.   clear: both;

  265. }

  266. 

  267. .btn-toolbar .btn,

  268. .btn-toolbar .btn-group,

  269. .btn-toolbar .input-group {

  270.   float: left;

  271. }

  272. 

  273. .btn-toolbar > .btn,

  274. .btn-toolbar > .btn-group,

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

  276.   margin-left: 5px;

  277. }

  278. 

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

  280.   border-radius: 0;

  281. }

  282. 

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

  284.   margin-left: 0;

  285. }

  286. 

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

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

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

  290. }

  291. 

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

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

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

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

  296. }

  297. 

  298. .btn-group > .btn-group {

  299.   float: left;

  300. }

  301. 

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

  303.   border-radius: 0;

  304. }

  305. 

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

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

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

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

  310. }

  311. 

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

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

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

  315. }

  316. 

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

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

  319.   outline: 0;

  320. }

  321. 

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

  323.   padding-left: 8px;

  324.   padding-right: 8px;

  325. }

  326. 

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

  328.   padding-left: 12px;

  329.   padding-right: 12px;

  330. }

  331. 

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

  333.   padding-left: 6px;

  334.   padding-right: 6px;

  335. }

  336. 

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

  338.   padding-left: 4px;

  339.   padding-right: 4px;

  340. }

  341. 

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

  343.   box-shadow: none;

  344. }

  345. 

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

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

  348. }

  349. 

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

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

  352. }

  353. 

  354. .btn-group-vertical > .btn,

  355. .btn-group-vertical > .btn-group,

  356. .btn-group-vertical > .btn-group > .btn {

  357.   display: block;

  358.   float: none;

  359.   width: 100%;

  360.   max-width: 100%;

  361. }

  362. 

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

  364.   content: " ";

  365.   display: table;

  366. }

  367. 

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

  369.   clear: both;

  370. }

  371. 

  372. .btn-group-vertical > .btn-group > .btn {

  373.   float: none;

  374. }

  375. 

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

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

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

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

  380.   margin-top: -1px;

  381.   margin-left: 0;

  382. }

  383. 

  384. .btn-group--operations {

  385.   width: 100%;

  386.   display: flex;

  387.   justify-content: center;

  388. }

  389. 

  390. .block-group-add-event-block,

  391. .block-group-add-topic-block,

  392. .block-event-add-block,

  393. .block-topic-add-block,

  394. .block-group-add-block {

  395.   display: inline-block;

  396. }

  397. 

  398. .shariff-button {

  399.   text-align: center;

  400. }

  401. 

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

  403.   .block-group-add-event-block,

  404.   .block-group-add-topic-block,

  405.   .block-event-add-block,

  406.   .block-topic-add-block,

  407.   .block-group-add-block {

  408.     display: block;

  409.   }

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

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

  412.   .block-event-add-block .btn,

  413.   .block-topic-add-block .btn,

  414.   .block-group-add-block .btn {

  415.     width: 100%;

  416.     margin-bottom: 0.75rem;

  417.   }

  418. }

  419. 

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

  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.     margin-top: 1rem;

  427.   }

  428. }