myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From hno...@apache.org
Subject svn commit: r1794016 - /myfaces/tobago/trunk/tobago-core/src/main/resources/scss/_tobago.scss
Date Fri, 05 May 2017 11:15:26 GMT
Author: hnoeth
Date: Fri May  5 11:15:26 2017
New Revision: 1794016

URL: http://svn.apache.org/viewvc?rev=1794016&view=rev
Log:
cleanup tobago.scss

Modified:
    myfaces/tobago/trunk/tobago-core/src/main/resources/scss/_tobago.scss

Modified: myfaces/tobago/trunk/tobago-core/src/main/resources/scss/_tobago.scss
URL: http://svn.apache.org/viewvc/myfaces/tobago/trunk/tobago-core/src/main/resources/scss/_tobago.scss?rev=1794016&r1=1794015&r2=1794016&view=diff
==============================================================================
--- myfaces/tobago/trunk/tobago-core/src/main/resources/scss/_tobago.scss (original)
+++ myfaces/tobago/trunk/tobago-core/src/main/resources/scss/_tobago.scss Fri May  5 11:15:26
2017
@@ -117,11 +117,11 @@ Todo: check, if this is needed? (It does
 
 .tobago-date {
   min-width: 7em;
-}
 
-/* Remove IE10's "clear field" X button */
-.tobago-date::-ms-clear {
-  display: none;
+  &::-ms-clear {
+    /* Remove IE10's "clear field" X button */
+    display: none;
+  }
 }
 
 /* for pickers with more than one icon, e.g. date-time picker */
@@ -172,31 +172,32 @@ body {
 /* flexLayout -------------------------------------------------------------- */
 
 .tobago-flexLayout {
-    display: -webkit-flex; /* needed e.g. for Safari 8.0.2 */
-    display: -ms-flexbox; /* needed for IE 10 */
-    display: flex;
-    min-width: 0; /* without this, Firefox/Webkit are different from IE:
-    Set the minimal width to zero make flex-layout responsive for the width,
-    even if there is overflowing content.
-    currently e.g. PRE-code blocks in the demo are too wide. XXX */
+  display: -webkit-flex; /* needed e.g. for Safari 8.0.2 */
+  display: -ms-flexbox; /* needed for IE 10 */
+  display: flex;
+  min-width: 0;
+  /* without this, Firefox/Webkit are different from IE:
+     Set the minimal width to zero make flex-layout responsive for the width,
+     even if there is overflowing content.
+     currently e.g. PRE-code blocks in the demo are too wide. XXX */
   margin-left: -3px;
   margin-right: -3px;
-}
 
-.tobago-flexLayout > * {
-  margin-left: 3px;
-  margin-right: 3px;
-}
+  > * {
+    margin-left: 3px;
+    margin-right: 3px;
+  }
 
-.tobago-flexLayout > .tobago-flexLayout {
-  margin-left: 0;
-  margin-right: 0;
+  > .tobago-flexLayout {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 .tobago-flexLayout-markup-vertically {
-    flex-direction: column;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
 }
 
 .tobago-alignItems-baseline {
@@ -227,15 +228,15 @@ body {
   justify-content: flex-start;
 }
 
-.tobago-justifyContent-flexEnd{
+.tobago-justifyContent-flexEnd {
   justify-content: flex-end;
 }
 
-.tobago-justifyContent-spaceBetween{
+.tobago-justifyContent-spaceBetween {
   justify-content: space-between;
 }
 
-.tobago-justifyContent-spaceAround{
+.tobago-justifyContent-spaceAround {
   justify-content: space-around;
 }
 
@@ -248,9 +249,9 @@ body {
 .tobago-footer {
   background-color: #ffffff;
   padding: 5px 10px;
-  -webkit-box-shadow: 0 0 5px 5px rgba(200,200,200,0.5);
-  -moz-box-shadow: 0 0 5px 5px rgba(200,200,200,0.5);
-  box-shadow: 0 0 5px 5px rgba(200,200,200,0.5);
+  -webkit-box-shadow: 0 0 5px 5px rgba(200, 200, 200, 0.5);
+  -moz-box-shadow: 0 0 5px 5px rgba(200, 200, 200, 0.5);
+  box-shadow: 0 0 5px 5px rgba(200, 200, 200, 0.5);
 }
 
 .fixed-bottom {
@@ -265,45 +266,48 @@ body {
 /* gridLayout -------------------------------------------------------------- */
 
 .tobago-gridLayout {
-    width: 100%;
-    height: 100%;
-/*
-    border-spacing: 5px;
-    border-collapse: separate;
-*/
-    border-spacing: 0;
-    border-collapse: collapse;
+  width: 100%;
+  height: 100%;
+  /*
+      border-spacing: 5px;
+      border-collapse: separate;
+  */
+  border-spacing: 0;
+  border-collapse: collapse;
 }
 
-table.tobago-gridLayout > tbody > tr > td {
+table.tobago-gridLayout > tbody {
+  > tr > td {
     vertical-align: top;
     padding: 0;
     border-left: 5px solid transparent;
     border-top: 5px solid transparent;
-    height: 100%; /* needed for Firefox */
-}
+    height: 100%;
+    /* needed for Firefox */
+
+    > * {
+      height: 100%;
+      width: 100%;
+    }
+  }
 
-table.tobago-gridLayout > tbody > tr > td:first-child {
+  > tr > td:first-child {
     border-left: 0;
-}
+  }
 
-table.tobago-gridLayout > tbody > tr:first-child > td {
+  > tr:first-child > td {
     border-top: 0;
-}
-
-table.tobago-gridLayout > tbody > tr > td > * {
-  height: 100%;
-  width: 100%;
+  }
 }
 
 /* header ----------------------------------------------------------- */
 
 .tobago-header {
-    margin-bottom: 1rem;
-}
+  margin-bottom: 1rem;
 
-.tobago-header.fixed-top {
+  &.fixed-top {
     margin-bottom: 0;
+  }
 }
 
 /* image ----------------------------------------------------------- */
@@ -330,10 +334,10 @@ table.tobago-gridLayout > tbody > tr > t
 
 .tobago-link {
   white-space: nowrap;
-}
 
-.tobago-link span {
-  white-space: normal
+  span {
+    white-space: normal
+  }
 }
 
 button {
@@ -364,22 +368,22 @@ button {
       text-decoration: none;
     }
   }
-}
 
-button.tobago-link-markup-disabled, button.tobago-command-markup-disabled {
-  cursor: not-allowed;
-  opacity: .65;
-}
+  &.tobago-link-markup-disabled, &.tobago-command-markup-disabled {
+    cursor: not-allowed;
+    opacity: .65;
 
-button.tobago-link-markup-disabled:hover, button.tobago-command-markup-disabled:hover {
-  color: $blue;
-  text-decoration: none;
-}
+    &:hover {
+      color: $blue;
+      text-decoration: none;
+    }
+  }
 
-button.nav-link { /* bootstrap don't know button.nav-link*/
-  padding: $nav-link-padding;
-  padding-top: .55em;
-  padding-bottom: .45em;
+  &.nav-link { /* bootstrap don't know button.nav-link*/
+    padding: $nav-link-padding;
+    padding-top: .55em;
+    padding-bottom: .45em;
+  }
 }
 
 .navbar-nav button.nav-link {
@@ -391,15 +395,17 @@ button.nav-link { /* bootstrap don't kno
 
 .tobago-messages-container {
   align-items: flex-start;
-}
 
-.tobago-messages-container.tobago-flexLayout .tobago-messages:first-child small label {
-  margin-right: 0; /* for tc:in margin 5px is already set */
-  margin-bottom: 5px;
-}
+  &.tobago-flexLayout {
+    .tobago-messages:first-child small label {
+      margin-right: 0; /* for tc:in margin 5px is already set */
+      margin-bottom: 5px;
+    }
 
-.tobago-messages-container.tobago-flexLayout .tobago-selectManyShuttle {
-  flex-grow: 1;
+    .tobago-selectManyShuttle {
+      flex-grow: 1;
+    }
+  }
 }
 
 a.tobago-messages-button {
@@ -409,10 +415,10 @@ a.tobago-messages-button {
 
 .tobago-messages label {
   display: block;
-}
 
-.tobago-messages label:last-child {
-  margin-bottom: 0;
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 /* nav ----------------------------------------------------------- */
@@ -426,24 +432,25 @@ a.tobago-messages-button {
 */
 
 /* styles for drop down menu first level */
-.dropdown-toggle:focus, .dropdown-toggle:hover {
-  text-decoration: none;
+.dropdown-toggle {
+  &:focus, &:hover {
+    text-decoration: none;
+  }
 }
 
-
 /* no bottom border in navtabs, if panel-body under it */
 .nav-tabs {
   border-bottom-width: 0;
-}
 
-.nav-tabs > li.active > a {
-  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
-  background-repeat: repeat-x;
-  border-bottom: #dddddd;
-}
+  > li.active > a {
+    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+    background-repeat: repeat-x;
+    border-bottom: #dddddd;
 
-.nav-tabs > li.active > a:hover {
-  border-bottom: #dddddd;
+    &:hover {
+      border-bottom: #dddddd;
+    }
+  }
 }
 
 .dropdown-menu .form-check {
@@ -483,36 +490,36 @@ a.tobago-messages-button {
       text-decoration: none;
     }
   }
-}
 
-.tobago-dropdown-submenu:after {
-  content: " ";
-  float: right;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #cccccc;
-  margin-top: 7px;
-  margin-right: -10px;
-}
+  &:after {
+    content: " ";
+    float: right;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 5px 0 5px 5px;
+    border-left-color: #cccccc;
+    margin-top: 7px;
+    margin-right: -10px;
+  }
 
-.tobago-dropdown-submenu:hover > .dropdown-menu {
-  display: block;
+  &:hover > .dropdown-menu {
+    display: block;
 
-  > a:after {
-    border-left-color: $dropdown-bg;
+    > a:after {
+      border-left-color: $dropdown-bg;
+    }
   }
-}
 
-.tobago-dropdown-submenu.pull-left {
-  float: none;
+  &.pull-left {
+    float: none;
 
-  > .dropdown-menu {
-    left: -100%;
-    margin-left: 10px;
-    -webkit-border-radius: 6px 0 6px 6px;
-    -moz-border-radius: 6px 0 6px 6px;
-    border-radius: 6px 0 6px 6px;
+    > .dropdown-menu {
+      left: -100%;
+      margin-left: 10px;
+      -webkit-border-radius: 6px 0 6px 6px;
+      -moz-border-radius: 6px 0 6px 6px;
+      border-radius: 6px 0 6px 6px;
+    }
   }
 }
 
@@ -572,10 +579,10 @@ span.tobago-out:empty:before {
   width: 100%;
   /* TODO: better z-index strategy */
   z-index: 500; /* less than the bootstrap navbar */
-}
 
-.tobago-page-overlayCenter img {
-  position: relative;
+  img {
+    position: relative;
+  }
 }
 
 .tobago-page-noscript {
@@ -614,13 +621,10 @@ span.tobago-out:empty:before {
 /* section ----------------------------------------------------------- */
 
 /* to separate the icon from the rest of the title */
-h1 > .fa:first-child,
-h2 > .fa:first-child,
-h3 > .fa:first-child,
-h4 > .fa:first-child,
-h5 > .fa:first-child,
-h6 > .fa:first-child {
-  margin-right: 0.7em;
+h1, h2, h3, h4, h5, h6 {
+  > .fa:first-child {
+    margin-right: 0.7em;
+  }
 }
 
 .tobago-section-header {
@@ -673,11 +677,11 @@ h6 > .fa:first-child {
 
 .tobago-selectManyShuttle {
   display: flex;
-}
 
-.tobago-selectManyShuttle .tobago-selectManyShuttle-unselected,
-.tobago-selectManyShuttle .tobago-selectManyShuttle-selected {
-  flex: 1 0 0px;
+  .tobago-selectManyShuttle-unselected,
+  .tobago-selectManyShuttle-selected {
+    flex: 1 0 0px;
+  }
 }
 
 .tobago-selectManyShuttle-hidden {
@@ -688,19 +692,18 @@ h6 > .fa:first-child {
   display: flex;
   flex-direction: column;
   padding: 0 0.5rem;
-}
 
-.tobago-selectManyShuttle-toolBar > button {
-  display: block;
-}
+  > button {
+    display: block;
+  }
 
-.tobago-selectManyShuttle-toolBar > div {
-  flex: 1 0 0px;
-}
+  > div {
+    flex: 1 0 0px;
+  }
 
-/* XXX this fixes the margin left from .btn:nth-child(n+2), but is ugly */
-.tobago-selectManyShuttle-toolBar > * {
-  margin-left: 0 !important;
+  > * { /* XXX this fixes the margin left from .btn:nth-child(n+2), but is ugly */
+    margin-left: 0 !important;
+  }
 }
 
 /* selectOneRadio ---------------------------------------------------------- */
@@ -770,26 +773,26 @@ p.tobago-separator {
   padding: 0;
   margin-top: 1em;
   margin-bottom: 1em;
-}
 
-p.tobago-separator:before, p.tobago-separator:after {
-  content: "";
-  height: 1px;
-  background-color: rgba(0, 0, 0, 0.1);
-  display: inline-block;
-  vertical-align: middle;
-}
+  &:before, &:after {
+    content: "";
+    height: 1px;
+    background-color: rgba(0, 0, 0, 0.1);
+    display: inline-block;
+    vertical-align: middle;
+  }
 
-p.tobago-separator:before {
-  width: 80px;
-  margin-left: 0;
-  margin-right: 5px;
-}
+  &:before {
+    width: 80px;
+    margin-left: 0;
+    margin-right: 5px;
+  }
 
-p.tobago-separator:after {
-  width: 100%;
-  margin-left: 5px;
-  margin-right: 0;
+  &:after {
+    width: 100%;
+    margin-left: 5px;
+    margin-right: 0;
+  }
 }
 
 /* sheet -------------------------------------------------------------- */
@@ -798,10 +801,10 @@ p.tobago-separator:after {
 
 th.tobago-sheet-headerCell {
   font-weight: normal;
-}
 
-th.tobago-sheet-headerCell .tobago-out {
-  font-weight: bold;
+  .tobago-out {
+    font-weight: bold;
+  }
 }
 
 .tobago-sheet-header {
@@ -842,11 +845,12 @@ th.tobago-sheet-headerCell .tobago-out {
 .tobago-sheet-paging-markup-left {
   float: left;
 }
+
 .tobago-sheet-paging-markup-center {
 }
 
 .tobago-sheet-paging-markup-right {
-  float:right;
+  float: right;
 }
 
 .tobago-sheet-pagingInput {
@@ -918,10 +922,10 @@ th.tobago-sheet-headerCell .tobago-out {
 
 .typeahead {
   background-color: #FFFFFF;
-}
 
-.typeahead:focus {
-  border: 2px solid #0097CF;
+  &:focus {
+    border: 2px solid #0097CF;
+  }
 }
 
 .tt-query {
@@ -953,22 +957,22 @@ th.tobago-sheet-headerCell .tobago-out {
 }
 
 .tt-suggestion {
-    padding: 3px 20px;
-}
+  padding: 3px 20px;
 
-.tt-suggestion:hover {
+  &:hover {
     background-color: #0097CF;
     color: #FFFFFF;
     cursor: pointer;
-}
+  }
 
-.tt-suggestion.tt-cursor {
-  background-color: #0097CF;
-  color: #FFFFFF;
-}
+  &.tt-cursor {
+    background-color: #0097CF;
+    color: #FFFFFF;
+  }
 
-.tt-suggestion p {
-  margin: 0;
+  p {
+    margin: 0;
+  }
 }
 
 /* tab / tab-group ----------------------------------------------------------------- */
@@ -1050,49 +1054,52 @@ fixme: there is a problem with the selec
   width: 155px;
 }
 
-/* fixes vertical space, todo: why is is needed? is there a better way? */
-.form-horizontal > * {
-  margin-top: 10px;
-  margin-bottom: 5px;
-  /* XXX MUST BE REMOVED */
-}.form-horizontal .control-label {
-   margin-top: 10px;
-   margin-bottom: 5px;
- }
+.form-horizontal {
+
+  > * { /* fixes vertical space, todo: why is is needed? is there a better way? */
+    margin-top: 10px;
+    margin-bottom: 5px;
+    /* XXX MUST BE REMOVED */
+  }
+
+  .control-label {
+    margin-top: 10px;
+    margin-bottom: 5px;
+  }
+}
+
 /* FIXME: This is to hide the toolbar, until it is implemented */
 .tobago-tabGroup-toolBar {
   display: none;
 }
 
-.tobago-has-info .form-control-feedback,
-.tobago-has-info .form-control-label,
-.tobago-has-info .form-check-label,
-.tobago-has-info .form-check-inline,
-.tobago-has-info .custom-control {
-  color: $brand-info;
-}
+.tobago-has-info {
+  .form-control-feedback, .form-control-label, .form-check-label, .form-check-inline, .custom-control
{
+    color: $brand-info;
+  }
 
-.tobago-has-info .form-control {
-  border-color: $brand-info;
-}
+  .form-control {
+    border-color: $brand-info;
+  }
 
-.tobago-has-info .input-group-addon {
-  color: $brand-info;
-  background-color: #eaf6ea;
-  border-color: $brand-info;
-}
+  .input-group-addon {
+    color: $brand-info;
+    background-color: #eaf6ea;
+    border-color: $brand-info;
+  }
 
-.tobago-has-info .form-control-feedback {
-  color: $brand-info;
-}
+  .form-control-feedback {
+    color: $brand-info;
+  }
 
-.tobago-has-info .form-control-success {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==");
+  .form-control-success {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==");
+  }
 }
 
 .tobago-required .tobago-label:after {
-  content:"*";
-  color:red;
+  content: "*";
+  color: red;
 }
 
 /* Bootstrap datetimepicker workarounds ------------------------------------------------------------------
*/
@@ -1101,7 +1108,8 @@ fixme: there is a problem with the selec
  * CSS extension for bootstrap3-datetimepicker to fit with bootstrap4.
  */
 
-.bootstrap-datetimepicker-widget th,
-.bootstrap-datetimepicker-widget td {
-  padding: 5px;
+.bootstrap-datetimepicker-widget {
+  th, td {
+    padding: 5px;
+  }
 }



Mime
View raw message