ethosstyles 0.1.15 → 0.1.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 95e0be2e152179fc55900ae9659e3b43f1172737
-  data.tar.gz: 9be708925dbbda7e350e8612491f75986c49fea7
+  metadata.gz: 5db4480dda5a560203ecd5a27cbb7e941c578d7f
+  data.tar.gz: b70b02bb00c73df116d2975b3807c967f655d544
 SHA512:
-  metadata.gz: 731bf7ab2b4f4998a7407f45cb15fa5486ba0fa8410b0f5067f552b11071f0b9ccd50c655c267eb4df07b972a69b5d57d44d783a2fabd61cd623d9b4393b7325
-  data.tar.gz: d3f897e5b5eefc89d324605e92fe0d9ce9f35d3d835e07417b7ba9716a8103b8c2915d4744f59b5b395be85306fcb327cbaa13f68347292a12656431f1c5dfad
+  metadata.gz: 13ae30fd6e9c0e3d3768a3e8e7983d5959cdcc9963e597dae7cbe854e47f0d80d7a4d4d6cd29c4f6608f5f17594f2a1084a298f9667862e9054701210232ef67
+  data.tar.gz: 92f7508242f86c13455f8201cebdee5cd144bce6ce9e83025f88820e09aa97ef17e76f1034b5442550e0209b2b236f7c8790f518a9611a22663cc378014dfba5

data/README.md

@@ -4,6 +4,93 @@ These are Ethos's main styles.
 
 Note: These are foundational styles, and should be edited sparingly. You can still add styles to Moonbeam and OrCA in the `stylesheets` directories.
 
+## Stardust Development Guide
+
+
+1. **Building Stardust Locally**:
+	- Download [Stardust repo](https://git.corp.adobe.com/adobe-platform/stardust).
+	- Build with command `make dev`
+
+    **Troubleshooting**:
+    - You may need to [install sass](https://sass-lang.com/install).
+    - If you're using a VPN, you may need to re-run `docker-machine-nfs [MACHINE-NAME]`
+
+2. **Develop new elements in Moonbeam**
+
+    **Goal**: Create elements available for use in current and future Moonbeam UI.
+
+    Develop new elements for Moonbeam in `moonbeam/app/assets/stylesheets/components/_rf-for-gem.scss`.
+      - Prefix new styles with `.rf-`
+      - Make sure new styles are [BEM-ified](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
+
+3. **Port new elements to Stardust repo**:
+  
+    **Goal**: Add styles to Stardust and demonstrate their intended use. 
+   
+     Involved files:
+  	- `app/assets/stylesheets/components/<new-element>.scss`
+      - Copy the styles directly from `_rf-for-gem.scss` in Moonbeam and paste them here. Your code here must match what is in `_rf-for-gem.scss`.
+      - Demonstrate suggested use with HTML in the comments. For example, from [\_tables.scss](https://git.corp.adobe.com/adobe-platform/stardust/blob/master/app/assets/stylesheets/components/_tables.scss):
+      ```
+      //
+      // Tables
+      //
+
+      //
+      // Structure
+      //
+      //<table class="rf-table">
+      //  <tr class="rf-table__row rf-table__row--header">
+      //    <th class="rf-table__th">Product</th>
+      //    <th class="rf-table__th">Name</th>
+      //  </tr>
+      //  <tbody class="rf-table__body">
+      //    <tr class="rf-table__row">
+      //      <td class="rf-table__td"> Cell #1</td>
+      //      <td class="rf-table__td"> Cell #2</td>
+      //    </tr>
+      //  </tbody>
+      //</table>
+      //
+      // Best Practices
+      //
+      // Set column widths in the header
+      //
+      ```  
+  	- `index.php`:
+  			Add a new section to the display page for the new element
+  	- `app/views/`:
+  		- `<new-element>.php` 
+  				Create new section for the new element
+  		- `partial_<new-element>.php`:
+  				Use to prevent repetitive code
+  	- `app/assets/stylesheets/_ethosstyles.scss`
+  		- Add an `@import` statement for the new element's stylesheet
+
+4. **Update GEM**
+
+   Follow [these instructions](https://adobe.sharepoint.com/:w:/r/sites/EthosPlatformEngineering/Shared%20Documents/Component%20and%20Initiative%20Folders/UI%26UX/Documentation/How%20to%20Publish%20Stardust.docx?d=w27fb8ea13235422d93a52b5608b05791&csf=1&e=IA7QwM) to update the GEM version.
+
+   In order for changes to show up in Moonbeam you may need to:
+   - Clear containters:
+    ```
+    docker rm -f $(docker ps -a|grep -v moonbeam_db|grep -v CONTAINER|awk '{print $1}')
+    docker start moonbeam_db
+    flotilla up moonbeam
+    ```
+
+   - Force a recompiling of the scss elements by editing `application.scss` (for example, add `body {background-color: yellow;}` and save).   
+
+5. **Update Moonbeam** 
+
+   **Goal**: Styles are sourced solely from Stardust GEM. 
+  
+   Remove redundant code from:
+	- Outdated Moonbeam stylehseets
+	- `_rf-for-gem.scss`
+	
+
+
 ## To edit gem
 To develop this gem locally:
 

data/app/assets/stylesheets/_ethosstyles.scss

@@ -24,6 +24,7 @@
 @import 'components/list-groups';
 @import 'components/logs';
 @import 'components/modal';
+@import 'components/notes';
 @import 'components/notices';
 @import 'components/panels';
 @import 'components/pills';
@@ -34,5 +35,6 @@
 @import 'components/timestamp';
 @import 'components/tooltips';
 @import 'components/well';
+@import 'components/highlights';
 
 @import 'pages/styleguide';

data/app/assets/stylesheets/components/_base.scss

@@ -98,6 +98,10 @@ small,
   font-size: 11px;
 }
 
+.rf-pre {
+  white-space: pre-line;
+}
+
 
 //
 // LISTS

data/app/assets/stylesheets/components/_blurbs.scss

@@ -1,6 +1,13 @@
 //
 // BLURBS
-// todo: add success and info styles
+//
+
+//
+// Structure
+//
+// <div class="rf-blurb rf-blurb--[modifier]">
+//   <p>Body</p>
+// </div>
 //
 
 .rf-blurb {
@@ -17,21 +24,105 @@
     border-radius: 10px;
     content: '';
     display: block;
-    font-family: 'Glyphicons Halflings';
+    font-family: $font-icon-f5;
     font-size: 18px;
-    height: 18px;
     left: -11px;
+    line-height: 19px;
+    height: 18px;
     position: absolute;
-    top: 16px;
+    top: 14px;
     width: 18px;
   }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+//
+// BLURB TYPES
+//
+
+// INFO
+
+.rf-blurb--info {
+  border-left: 4px solid $blue-bright;
+
+  &:before {
+    color: $blue-bright;
+    content: "\f05a";
+  }
 }
 
+// SUCCESS
+
+.rf-blurb--success {
+  border-left: 4px solid $green;
+
+  &:before {
+    color: $green;
+    content: "\f058";
+  }
+}
+
+// WARNING
+
+.rf-blurb--warning {
+  border-left: 4px solid $gold;
+
+  &:before {
+    color: $gold;
+    content: "\f071";
+    left: -12px;
+  }
+}
+
+// ERROR
+
 .rf-blurb--error {
   border-left: 4px solid $red;
 
   &:before {
     color: $red;
-    content: "\e101";;
+    content: "\f06a";
+  }
+}
+
+// HIGHLIGHT
+
+.rf-blurb--highlight {
+  background-color: $baby-blue;
+
+  &:before {
+    display: none;
+  }
+}
+
+// PLAIN (NO ICON)
+
+.rf-blurb--plain:before {
+  display: none;
+}
+
+// CONDENSED
+
+.rf-blurb--condensed {
+  padding-bottom: 10px;
+  padding-top: 10px;
+
+  // Moves blurb icon up to account for different margins
+  &:before {
+    top: 10px;
+  }
+}
+
+// LARGE
+
+.rf-blurb--large {
+  @extend .rf-p--lead;
+  padding: $list-padding * 2;
+
+  &:before {
+    top: 28px;
   }
 }

data/app/assets/stylesheets/components/_buttons.scss

@@ -95,8 +95,9 @@ $btn-padding-x: $btn-padding-y * 1.8;
   &:after {
     content: "\f0d7";
     display: inline-block;
-    font-family: $font-icon-f;
+    font-family: $font-icon-f5;
     font-size: .8em;
+    font-weight: 900;
     line-height: 1em;
     margin-left: 7px;
   }
@@ -121,7 +122,7 @@ $btn-padding-x: $btn-padding-y * 1.8;
     color: $white;
     content: "\f071";
     display: inline-block;
-    font-family: $font-icon-f;
+    font-family: $font-icon-f5;
     font-size: 1em;
     line-height: .6em;
     margin-right: 4px;

data/app/assets/stylesheets/components/_forms.scss

@@ -2,6 +2,27 @@
 // FORMS
 //
 
+//
+// Structure
+//
+// <form class="rf-form">
+//   <h2>Form Title</h2>
+//   ...
+//   <div class="rf-form-group rf-form-group--[modifiers]">
+//     <div class="rf-label rf-label--[modifiers]">Input Label</div>
+//     <input class="rf-form-control" type="text" placeholder="placeholder text">
+//   </div>
+//   ...
+//   <input class="rf-btn rf-btn--primary" type="submit" value="Submit">
+// </form>
+//
+
+// TEXT
+
+textarea {
+  min-height: 68px;
+}
+
 %rf-form-control--text {
   background-color: $white;
   border: $input-border-default;
@@ -31,10 +52,18 @@
   padding-bottom: $input-padding-v;
 }
 
+// FORM CONTROL
+
+.rf-form-control[disabled] {
+  @extend .rf-u-disabled;
+}
+
 .rf-form-control {
   @extend %rf-form-control--text;
   color: $charcoal;
+  cursor: auto;
   height: 34px;
+  max-width: 340px;
   padding: $input-padding-v $input-padding-h;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 
@@ -43,31 +72,127 @@
   }
 }
 
+// FORM GROUP
+
 .rf-form-group {
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: 18px;
 }
 
 .rf-form-group:last-child {
   margin-bottom: 0;
 }
 
+.rf-form-group--condensed {
+  margin-bottom: 6px;
+}
+
+//
+// INLINE FORMS
+//
+
+//
+// Structures
+//
+// <div class="rf-label rf-label--[modifiers]">Labels</div>
+// <div class="rf-form-group--inline">
+//   <input class="rf-form-control" type="text" placeholder="placeholder text">
+//   <input class="rf-btn rf-btn--primary" type="submit" value="Submit">
+// </div>
+//
+
 .rf-form-group--inline {
   align-items: center;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
 
   .rf-label {
     margin-bottom: 0;
-    margin-left: 10px;
+    margin-left: 0;
     margin-right: 4px;
   }
+
+  .rf-btn {
+    margin-left: 10px;
+  }
+}
+
+.rf-form-group__msg {
+  display: none;
+  font-size: 12px;
+  line-height: 12px;
 }
 
+// FORM CONTROL AND MESSAGE SIZES
+
+.rf-form-control--small,
+.rf-form-group__msg--small {
+  width: 60px;
+}
+
+// FORM ERRORS
+
+.rf-form-control--error {
+  border-color: $red;
+}
+
+.rf-form-group__msg--error {
+  color: $red;
+}
+
+// LABELS
+
 .rf-label--inline {
   margin-bottom: 0;
 }
 
+.rf-label,
+%rf-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+// REQUIRED NOTATION FOR FORMS
+
+.rf-label--required,
+%rf-label--required {
+  &:after {
+    color: $blue-bright;
+    content: '*';
+    display: inline-block;
+    font-size: 1.2em;
+    margin-left: 1px;
+  }
+}
+
+// PLACEHOLDER STYLING FOR INPUTS
+
+input { @include placeholder {
+  color: $stormy;
+  font-style: italic;
+  font-weight: normal;
+}}
+
+::-moz-placeholder {
+  opacity: 1; // Firefox automatically fades placeholders
+}
+
 .rf-editable-text {
   width: 100%;
+
+  a {
+    color: $slate;
+    text-decoration: underline;
+  }
+}
+
+// MULTISELECT
+
+.rf-form-control--multiselect {
+  padding: 0;
+
+  option {
+    padding: 0 6px;
+  }
 }