Apply bootstrap modal style into noosfero

Signed-off-by: Fabio Teixeira <fabio1079@gmail.com>

Apply bootstrap modal style into noosfero
Signed-off-by: Fabio Teixeira <fabio1079@gmail.com>
Fabio Teixeira
1 parent 81c266de
Showing 3 changed files with 106 additions and 1 deletions Show diff stats
src/noosfero-spb-theme/css/main-content.css
src/noosfero-spb-theme/css/modal.css
src/noosfero-spb-theme/style.css
@@ -86,7 +86,8 @@
     margin: 0 10px 10px 0;
 }
  
-#content a.button.with-text{
+#content a.button.with-text,
+.modal .button.with-text {
   height: 32px;
   padding: 5px 15px;
   background: #FFF none;
@@ -0,0 +1,103 @@
+.modal {
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 1050;
+  display: none;
+  overflow: hidden;
+  outline: 0px none;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-open .modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.fade {
+  opacity: 0;
+  transition: opacity 0.15s linear 0s;
+}
+
+.fade.in {
+  opacity: 1;
+}
+
+.modal-dialog {
+  width: 600px;
+  margin: 60px auto;
+  position: relative;
+}
+
+.modal.in .modal-dialog {
+  transform: translate(0px, 0px);
+}
+
+.modal.fade .modal-dialog {
+  transition: transform 0.3s ease-out 0s;
+  transform: translate(0px, -25%);
+}
+
+.modal-content {
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+  position: relative;
+  background-color: #FFF;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  outline: 0px none;
+  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  min-height: 16.43px;
+  padding: 15px;
+  border-bottom: 1px solid #E5E5E5;
+}
+
+.modal-header .close {
+  margin-top: -2px;
+}
+
+.modal-header button.close {
+  padding: 0px;
+  cursor: pointer;
+  background: transparent none repeat scroll 0px 0px;
+  border: 0px none;
+}
+
+.modal-header .close {
+  float: right;
+  font-size: 21px;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0px 1px 0px #FFF;
+  opacity: 0.2;
+}
+
+.modal-title {
+  margin: 0px;
+  line-height: 1.42857;
+}
+
+.modal-body {
+  position: relative;
+  padding: 15px;
+}
+
+.modal-footer {
+  padding: 15px;
+  text-align: right;
+  border-top: 1px solid #E5E5E5;
+}
+
+
+.modal button.button.with-text {
+  padding: 0px 15px;
+}
@@ -25,6 +25,7 @@
 @import url(css/software-catalog-page.css);
 @import url(css/tooltip.css);
 @import url(css/popover.css);
+@import url(css/modal.css);
  
 @font-face{
   font-weight: normal;
...	...	@@ -86,7 +86,8 @@
86	86	margin: 0 10px 10px 0;
87	87	}
88	88
89		-#content a.button.with-text{
	89	+#content a.button.with-text,
	90	+.modal .button.with-text {
90	91	height: 32px;
91	92	padding: 5px 15px;
92	93	background: #FFF none;
...	...
...	...	@@ -0,0 +1,103 @@
	1	+.modal {
	2	+ position: fixed;
	3	+ top: 0px;
	4	+ right: 0px;
	5	+ bottom: 0px;
	6	+ left: 0px;
	7	+ z-index: 1050;
	8	+ display: none;
	9	+ overflow: hidden;
	10	+ outline: 0px none;
	11	+ background-color: rgba(0, 0, 0, 0.5);
	12	+}
	13	+
	14	+.modal-open .modal {
	15	+ overflow-x: hidden;
	16	+ overflow-y: auto;
	17	+}
	18	+
	19	+.fade {
	20	+ opacity: 0;
	21	+ transition: opacity 0.15s linear 0s;
	22	+}
	23	+
	24	+.fade.in {
	25	+ opacity: 1;
	26	+}
	27	+
	28	+.modal-dialog {
	29	+ width: 600px;
	30	+ margin: 60px auto;
	31	+ position: relative;
	32	+}
	33	+
	34	+.modal.in .modal-dialog {
	35	+ transform: translate(0px, 0px);
	36	+}
	37	+
	38	+.modal.fade .modal-dialog {
	39	+ transition: transform 0.3s ease-out 0s;
	40	+ transform: translate(0px, -25%);
	41	+}
	42	+
	43	+.modal-content {
	44	+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
	45	+}
	46	+
	47	+.modal-content {
	48	+ position: relative;
	49	+ background-color: #FFF;
	50	+ background-clip: padding-box;
	51	+ border: 1px solid rgba(0, 0, 0, 0.2);
	52	+ border-radius: 6px;
	53	+ outline: 0px none;
	54	+ box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);
	55	+}
	56	+
	57	+.modal-header {
	58	+ min-height: 16.43px;
	59	+ padding: 15px;
	60	+ border-bottom: 1px solid #E5E5E5;
	61	+}
	62	+
	63	+.modal-header .close {
	64	+ margin-top: -2px;
	65	+}
	66	+
	67	+.modal-header button.close {
	68	+ padding: 0px;
	69	+ cursor: pointer;
	70	+ background: transparent none repeat scroll 0px 0px;
	71	+ border: 0px none;
	72	+}
	73	+
	74	+.modal-header .close {
	75	+ float: right;
	76	+ font-size: 21px;
	77	+ font-weight: 700;
	78	+ line-height: 1;
	79	+ color: #000;
	80	+ text-shadow: 0px 1px 0px #FFF;
	81	+ opacity: 0.2;
	82	+}
	83	+
	84	+.modal-title {
	85	+ margin: 0px;
	86	+ line-height: 1.42857;
	87	+}
	88	+
	89	+.modal-body {
	90	+ position: relative;
	91	+ padding: 15px;
	92	+}
	93	+
	94	+.modal-footer {
	95	+ padding: 15px;
	96	+ text-align: right;
	97	+ border-top: 1px solid #E5E5E5;
	98	+}
	99	+
	100	+
	101	+.modal button.button.with-text {
	102	+ padding: 0px 15px;
	103	+}
...	...
...	...	@@ -25,6 +25,7 @@
25	25	@import url(css/software-catalog-page.css);
26	26	@import url(css/tooltip.css);
27	27	@import url(css/popover.css);
	28	+@import url(css/modal.css);
28	29
29	30	@font-face{
30	31	font-weight: normal;
...	...