bracket fixing

xenziffen · Feb 24, 2020 · a1c40d7 · a1c40d7
1 parent 9462ce6
commit a1c40d7
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 57 deletions.
diff --git a/lcars/css/lcars.css b/lcars/css/lcars.css
@@ -401,8 +401,8 @@ h6 {
   align-items: flex-end;
 }
 .lcars-row > :last-child {
-  margin-right: 0;
-  margin-left: auto;
+  margin-right: auto;
+  margin-left: 0;
   flex-grow: 1;
 }
 .lcars-row > * {
@@ -652,6 +652,10 @@ h6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.lcars-element.toptext {
+  align-items: flex-start;
+  padding-top: 0.25rem;
+}
 .lcars-element.button {
   cursor: pointer;
 }
@@ -665,10 +669,6 @@ h6 {
 .lcars-element.button.bottom {
   align-self: flex-end;
 }
-.lcars-element.button.toptext {
-  align-items: flex-start;
-  padding-top: 0.25rem;
-}
 .lcars-element .lcars-element-addition {
   display: flex;
   flex-direction: column;
@@ -797,6 +797,13 @@ a.lcars-text-box.blink {
 }
 .lcars-bracket {
   background-color: #fc6;
+  border-color: #fc6;
+  border-style: solid;
+  display: flex;
+  font-weight: bold;
+  color: #000;
+  justify-content: flex-end;
+  align-items: flex-end;
 }
 .lcars-bracket.left {
   width: 1.5rem;
@@ -809,21 +816,28 @@ a.lcars-text-box.blink {
   border-top-right-radius: 1.5rem;
   border-bottom-right-radius: 1.5rem;
   border-width: 0.75rem 0.25rem 0.75rem 0;
+  flex-grow: 0;
 }
 .lcars-bracket.top {
   height: 1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   border-top-left-radius: 1.5rem;
   border-top-right-radius: 1.5rem;
   border-width: 0.25rem 0.75rem 0 0.75rem;
 }
 .lcars-bracket.bottom {
   height: 1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   border-bottom-left-radius: 1.5rem;
   border-bottom-right-radius: 1.5rem;
   border-width: 0 0.75rem 0.25rem 0.75rem;
+  flex-grow: 0;
 }
 .lcars-bracket.hollow {
   background-color: #000;
+  color: inherit;
   border-style: solid;
   border-color: #fc6;
 }

diff --git a/lcars/css/lcars.devel.css b/lcars/css/lcars.devel.css
@@ -406,8 +406,8 @@ h6 {
   align-items: flex-end;
 }
 .lcars-row > :last-child {
-  margin-right: 0;
-  margin-left: auto;
+  margin-right: auto;
+  margin-left: 0;
   flex-grow: 1;
 }
 .lcars-row > * {
@@ -657,6 +657,10 @@ h6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.lcars-element.toptext {
+  align-items: flex-start;
+  padding-top: 0.25rem;
+}
 .lcars-element.button {
   cursor: pointer;
 }
@@ -670,10 +674,6 @@ h6 {
 .lcars-element.button.bottom {
   align-self: flex-end;
 }
-.lcars-element.button.toptext {
-  align-items: flex-start;
-  padding-top: 0.25rem;
-}
 .lcars-element .lcars-element-addition {
   display: flex;
   flex-direction: column;
@@ -720,6 +720,13 @@ h6 {
 }
 .lcars-bracket {
   background-color: #fc6;
+  border-color: #fc6;
+  border-style: solid;
+  display: flex;
+  font-weight: bold;
+  color: #000;
+  justify-content: flex-end;
+  align-items: flex-end;
 }
 .lcars-bracket.left {
   width: 1.5rem;
@@ -732,21 +739,28 @@ h6 {
   border-top-right-radius: 1.5rem;
   border-bottom-right-radius: 1.5rem;
   border-width: 0.75rem 0.25rem 0.75rem 0;
+  flex-grow: 0;
 }
 .lcars-bracket.top {
   height: 1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   border-top-left-radius: 1.5rem;
   border-top-right-radius: 1.5rem;
   border-width: 0.25rem 0.75rem 0 0.75rem;
 }
 .lcars-bracket.bottom {
   height: 1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   border-bottom-left-radius: 1.5rem;
   border-bottom-right-radius: 1.5rem;
   border-width: 0 0.75rem 0.25rem 0.75rem;
+  flex-grow: 0;
 }
 .lcars-bracket.hollow {
   background-color: #000;
+  color: inherit;
   border-style: solid;
   border-color: #fc6;
 }

diff --git a/lcars/css/lcars.min.css b/lcars/css/lcars.min.css
diff --git a/lcars/index.html b/lcars/index.html
@@ -328,7 +328,7 @@ <h3>Example</h3>
 							<div class="lcars-bar horizontal lcars-blue-bell-bg bottom"></div>
 							<div class="lcars-bar spacer"></div>
 							<div class="lcars-bar horizontal lcars-lavender-purple-bg right-end bottom"></div>
-					</div>
+						</div>
 					</p>
 					<p>
 						<div class="lcars-row">
@@ -359,44 +359,48 @@ <h2>BRACKETS</h2>
 							<li><span><pre class="lcars-rust-color">bottom</pre>: bottom bracket </span></li>
 						</ul>
 					</p>
-					<h3>Example</h3>
+					<h3 id="brackets-example">Example</h3>
 					<p>
 
-					<div class="lcars-row">
-						<div class="lcars-bracket left"></div>
-						<div class="lcars-column">
-							<div class="lcars-element"></div>
-							<div class="lcars-element"></div>
-						</div>
-						<div class="lcars-bracket right"></div>
-					</div>
-
-					<div class="lcars-row">
-						<div class="lcars-bracket left hollow"></div>
-						<div class="lcars-column">
-							<div class="lcars-element"></div>
-							<div class="lcars-element"></div>
+						<div class="lcars-row">
+							<div class="lcars-bracket left"></div>
+							<div class="lcars-column">
+								<div class="lcars-element">side brackets</div>
+								<div class="lcars-element toptext">solid</div>
+							</div>
+							<div class="lcars-bracket right"></div>
 						</div>
-						<div class="lcars-bracket right hollow"></div>
-					</div>
 
-					<div class="lcars-column lcars-u-2">
-						<div class="lcars-bracket top "></div>
 						<div class="lcars-row">
-							<div class="lcars-element"></div>
-							<div class="lcars-element"></div>
+							<div class="lcars-bracket left hollow"></div>
+							<div class="lcars-column">
+								<div class="lcars-element">side brackets</div>
+								<div class="lcars-element toptext">hollow</div>
+							</div>
+							<div class="lcars-bracket right hollow"></div>
 						</div>
-						<div class="lcars-bracket bottom "></div>
-					</div>
 
-					<div class="lcars-column lcars-u-2">
-						<div class="lcars-bracket top hollow"></div>
-						<div class="lcars-row">
-							<div class="lcars-element"></div>
-							<div class="lcars-element"></div>
+						<div class="lcars-column lcars-u-4">
+							<div class="lcars-row">
+								<div class="lcars-column lcars-u-2">
+									<div class="lcars-bracket top ">top bracket</div>
+										<div class="lcars-row">
+											<div class="lcars-element">11</div>
+											<div class="lcars-element">12</div>
+										</div>
+									<div class="lcars-bracket bottom ">bottom bracket</div>
+								</div>
+
+								<div class="lcars-column lcars-u-2">
+									<div class="lcars-bracket top hollow">top bracket hollow</div>
+										<div class="lcars-row">
+											<div class="lcars-element">51</div>
+											<div class="lcars-element">52</div>
+										</div>
+									<div class="lcars-bracket bottom hollow">bottom bracket hollow</div>
+								</div>
+							</div>
 						</div>
-						<div class="lcars-bracket bottom hollow"></div>
-					</div>
 
 					</p>
 

diff --git a/lcars/stylus/lcars_bracket.styl b/lcars/stylus/lcars_bracket.styl
@@ -4,32 +4,46 @@ bracket-border-size = base-height/4
 
 .{prefix}bracket
   background-color default-color
+  border-color default-color
+  border-style solid
+  display flex
+  font-weight bold
+  color black
+  justify-content flex-end
+  align-items flex-end
 
-  &.left
-    width (base-height/2)
+  &.left // not designed for text
+    width (base-height / 2)
     border-top-left-radius @width
     border-bottom-left-radius @width
     border-width bracket-border-size 0 bracket-border-size base-spacing
 
-  &.right
-    width (base-height/2)
+  &.right // not designed for text
+    width (base-height / 2)
     border-top-right-radius @width
     border-bottom-right-radius @width
     border-width bracket-border-size base-spacing bracket-border-size 0
+    flex-grow 0
 
   &.top
-    height (base-height/2)
+    height (base-height / 2)
+    padding-left @height
+    padding-right @height
     border-top-left-radius @height
     border-top-right-radius @height
     border-width base-spacing bracket-border-size 0 bracket-border-size 
-
+  
   &.bottom
-    height (base-height/2)
+    height (base-height / 2)
+    padding-left @height
+    padding-right @height
     border-bottom-left-radius @height
     border-bottom-right-radius @height
     border-width 0 bracket-border-size base-spacing bracket-border-size
+    flex-grow 0
 
   &.hollow
     background-color black
+    color inherit
     border-style solid
     border-color default-color
diff --git a/lcars/stylus/lcars_element.styl b/lcars/stylus/lcars_element.styl
@@ -34,6 +34,10 @@
     padding-left (base-height/2)
     padding-right (base-height/2)
 
+  &.toptext
+    align-items flex-start
+    padding-top base-spacing
+
   &.button
     cursor pointer
 
@@ -47,10 +51,6 @@
     &.bottom
       align-self flex-end
 
-    &.toptext
-      align-items flex-start
-      padding-top base-spacing
-
   .{prefix}element-addition
     display flex
     flex-direction column

diff --git a/lcars/stylus/lcars_layout.styl b/lcars/stylus/lcars_layout.styl
@@ -27,8 +27,8 @@
     align-items flex-end
 
   > :last-child
-    margin-right 0
-    margin-left auto
+    margin-right auto
+    margin-left 0
     flex-grow 1
 
   > *