remove the pipes in stylesheets

PRX · Jul 18, 2023 · e4f9b35 · e4f9b35
1 parent 8e352ce
commit e4f9b35
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 30 deletions.
diff --git a/app/views/fake/audio_segmenter.html.erb b/app/views/fake/audio_segmenter.html.erb
@@ -12,7 +12,7 @@
   data-waveform-inspector-audio-url-value="/audio/TOL_6min_720p_download.mp3"
   data-waveform-inspector-waveform-url-value="/audio/TOL_6min_720p_download.json"
   data-action="resize@window->waveform-inspector#updateLayout audio-breakpoints:markers.update->waveform-inspector#updateMarkers waveform-inspector:marker.update->audio-breakpoints#updateBreakpointMarker audio-breakpoint:marker.update->audio-breakpoints#updateBreakpointMarker audio-breakpoint:play->waveform-inspector#playMarker audio-breakpoint:seekTo->waveform-inspector#seekToMarker">
-  <header class="prx-content-header | d-flex justify-content-end mx-4 px-2 py-3">
+  <header class="prx-content-header d-flex justify-content-end mx-4 px-2 py-3">
     <h2 class="h1 fw-bold visually-hidden">Audio Segmenter</h2>
     <div class="">
       <button class="btn btn-primary">Save</button>
@@ -21,16 +21,16 @@
 
   <input type="hidden" data-audio-breakpoints-target="markersInput">
 
-  <div class="prx-waveform-inspector | d-grid gap-2 m-4">
+  <div class="prx-waveform-inspector d-grid gap-2 m-4">
     <div class="prx-waveform-inspector-container">
       <div class="prx-waveform-inspector-view-container" data-waveform-inspector-target="overview"></div>
       <div class="prx-waveform-inspector-scrollbar-wrapper">
         <div data-waveform-inspector-target="scrollbar"></div>
       </div>
       <div class="prx-waveform-inspector-view-container" data-waveform-inspector-target="zoom"></div>
     </div>
-    <div class="prx-waveform-inspector-footer | d-flex justify-content-between align-items-start">
-      <div class="prx-waveform-inspector-player-controls | d-flex gap-3 align-items-center">
+    <div class="prx-waveform-inspector-footer d-flex justify-content-between align-items-start">
+      <div class="prx-waveform-inspector-player-controls d-flex gap-3 align-items-center">
         <button class="btn btn-icon btn-icon-lg btn-icon-round btn-primary" data-action="click->waveform-inspector#togglePlaying">
           <span class="material-icons playing-hide" aria-label="Play">play_arrow</span>
           <span class="material-icons playing-show" aria-label="Pause">pause</span>
@@ -76,43 +76,43 @@
   <template data-audio-breakpoints-target="controlTemplate">
     <tr data-controller="audio-breakpoint tooltip" data-audio-breakpoint-completed-class="status--completed">
       <td>
-        <span class="completed-show | material-icons text-success">check_circle</span>
-        <span class="completed-hide | material-icons text-danger">error</span>
+        <span class="completed-show material-icons text-success">check_circle</span>
+        <span class="completed-hide material-icons text-danger">error</span>
       </td>
       <td>
         <span data-audio-breakpoint-target="label">Label Text</span>
       </td>
       <td>
-        <button class="has-start-time-hide | btn btn-sm btn-primary text-nowrap" data-action="audio-breakpoint#updateStartTimeToPlayhead">
+        <button class="has-start-time-hide btn btn-sm btn-primary text-nowrap" data-action="audio-breakpoint#updateStartTimeToPlayhead">
           Insert At Playhead <span class="material-icons" aria-hidden="true">my_location</span>
         </button>
-        <div class="has-start-time-show | prx-input-group input-group-sm">
+        <div class="has-start-time-show prx-input-group input-group-sm">
           <input class="form-control" placeholder="00:00"
             data-audio-breakpoint-target="startTime"
             data-action="keypress.enter->audio-breakpoint#changeStartTime"
             data-bs-toggle="tooltip"
             data-bs-title="Edit Start Time">
-          <button class="prx-input-confirm | btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Confirm Change" data-action="audio-breakpoint#changeStartTime">
+          <button class="prx-input-confirm btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Confirm Change" data-action="audio-breakpoint#changeStartTime">
             <span class="material-icons">done</span>
           </button>
-          <button class="prx-input-confirm-hidden | btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Set To Playhead" data-action="audio-breakpoint#updateStartTimeToPlayhead">
+          <button class="prx-input-confirm-hidden btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Set To Playhead" data-action="audio-breakpoint#updateStartTimeToPlayhead">
             <span class="material-icons">my_location</span>
           </button>
-          <button class="has-end-time-hide | btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Add End Time" data-action="audio-breakpoint#addEndTime">
+          <button class="has-end-time-hide btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Add End Time" data-action="audio-breakpoint#addEndTime">
             <span class="material-icons rotate-90">expand</span>
           </button>
         </div>
-        <span class="has-end-time-show | material-icons rotate-90">expand</span>
-        <div class="has-end-time-show | prx-input-group input-group-sm">
+        <span class="has-end-time-show material-icons rotate-90">expand</span>
+        <div class="has-end-time-show prx-input-group input-group-sm">
           <input class="form-control" placeholder="00:00"
             data-audio-breakpoint-target="endTime"
             data-action="keypress.enter->audio-breakpoint#changeEndTime"
             data-bs-toggle="tooltip"
             data-bs-title="Edit End Time">
-          <button class="prx-input-confirm | btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Confirm Change" data-action="audio-breakpoint#changeEndTime">
+          <button class="prx-input-confirm btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Confirm Change" data-action="audio-breakpoint#changeEndTime">
             <span class="material-icons">done</span>
           </button>
-          <button class="prx-input-confirm-hidden | btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Set To Playhead" data-action="audio-breakpoint#updateEndTimeToPlayhead">
+          <button class="prx-input-confirm-hidden btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Set To Playhead" data-action="audio-breakpoint#updateEndTimeToPlayhead">
             <span class="material-icons">my_location</span>
           </button>
           <button class="btn btn-icon btn-icon-borderless btn-primary" data-bs-toggle="tooltip" data-bs-title="Remove End Time" data-action="audio-breakpoint#removeEndTime">
@@ -121,10 +121,10 @@
         </div>
       </td>
       <td class="justify-content-end">
-        <button class="has-end-time-show | btn btn-icon btn-icon-round btn-primary" data-action="audio-breakpoint#play">
+        <button class="has-end-time-show btn btn-icon btn-icon-round btn-primary" data-action="audio-breakpoint#play">
           <span class="material-icons">play_arrow</span>
         </button>
-        <button class="has-start-time-show | btn btn-icon btn-icon-round btn-primary" data-action="audio-breakpoint#seekTo">
+        <button class="has-start-time-show btn btn-icon btn-icon-round btn-primary" data-action="audio-breakpoint#seekTo">
           <span class="material-icons">skip_next</span>
         </button>
       </td>

diff --git a/app/views/fake/index.html.erb b/app/views/fake/index.html.erb
@@ -118,7 +118,7 @@
         </div>
       </div>
       <div class="dashboard-list mb-4 shadow">
-        <div class="prx-podcast | card">
+        <div class="prx-podcast card">
           <div class="d-flex g-2 p-3 align-items-center">
             <div class="card-image">
               <%= image_tag "fake-podcast.png", width: 80 %>
@@ -135,7 +135,7 @@
           </div>
         </div>
 
-        <div class="prx-podcast | card">
+        <div class="prx-podcast card">
           <div class="d-flex g-2 p-3 align-items-center">
             <div class="card-image">
               <%= image_tag "fake-podcast.png", width: 80 %>

diff --git a/app/views/layouts/_nav.html.erb b/app/views/layouts/_nav.html.erb
@@ -1,4 +1,4 @@
-<div class="prx-header-bar | navbar navbar-dark align-items-stretch p-0 bg-primary-dark">
+<div class="prx-header-bar navbar navbar-dark align-items-stretch p-0 bg-primary-dark">
   <div class="container-fluid align-items-stretch pe-0">
     <header class="flex-grow-1 d-flex align-items-center">
       <%= link_to image_tag("dovetail_logo.svg", width: 152, height: 30, alt: "Dovetail from PRX"), main_app.podcasts_path, class: "navbar-brand d-inline-flex" %>

diff --git a/app/views/layouts/_subnav.html.erb b/app/views/layouts/_subnav.html.erb
@@ -1,9 +1,9 @@
-<div class="prx-app-bar | navbar justify-content-start align-items-stretch p-0 bg-white">
+<div class="prx-app-bar navbar justify-content-start align-items-stretch p-0 bg-white">
 
   <%= render "podcast_switcher/dropdown" %>
 
   <% if @podcast %>
-    <nav class="prx-app-nav | navbar-nav flex-row justifty-content-start">
+    <nav class="prx-app-nav navbar-nav flex-row justifty-content-start">
       <% if @podcast.new_record? %>
         <%= active_link_to "Settings", main_app.new_podcast_path, class: "nav-link" %>
       <% else %>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -22,23 +22,23 @@
     <%= render "layouts/confirm_field" %>
 
     <% if content_for? :tabs %>
-      <div class="prx-main | container-fluid flex-grow-1">
+      <div class="prx-main container-fluid flex-grow-1">
         <div class="row">
-          <aside class="prx-tabs | d-flex flex-column justify-content-between col-sm-12 col-md-3 col-xl-2">
-            <nav class="prx-tabs-nav | nav nav-tabs flex-column bg-white">
+          <aside class="prx-tabs d-flex flex-column justify-content-between col-sm-12 col-md-3 col-xl-2">
+            <nav class="prx-tabs-nav nav nav-tabs flex-column bg-white">
               <%= yield :tabs %>
             </nav>
             <% if content_for? :actions %>
-              <nav class="prx-tabs-actions | d-grid gap-3 px-2 py-3">
+              <nav class="prx-tabs-actions d-grid gap-3 px-2 py-3">
                 <%= yield :actions %>
               </nav>
             <% end %>
           </aside>
-          <main class="prx-tab-content | col-sm-12 col-md-9 col-xl-10 bg-white"><%= yield %></main>
+          <main class="prx-tab-content col-sm-12 col-md-9 col-xl-10 bg-white"><%= yield %></main>
         </div>
       </div>
     <% else %>
-      <main class="prx-main | container-xl">
+      <main class="prx-main container-xl">
         <%= yield %>
       </main>
     <% end %>

diff --git a/app/views/podcast_switcher/_dropdown.html.erb b/app/views/podcast_switcher/_dropdown.html.erb
@@ -1,4 +1,4 @@
-<div class="prx-podcast-switcher | dropdown" data-controller="focus">
+<div class="prx-podcast-switcher dropdown" data-controller="focus">
 
   <button class="btn btn-white dropdown-toggle" type="button" id="podcast-switcher" data-bs-toggle="dropdown" aria-expanded="false" data-action="focus#focus">
     <% if @podcast %>

diff --git a/app/views/podcasts/_podcast_page.html.erb b/app/views/podcasts/_podcast_page.html.erb
@@ -1,4 +1,4 @@
-<div class="prx-podcast | card">
+<div class="prx-podcast card">
   <div class="d-flex g-2 p-3 align-items-center">
     <div class="card-image">
       <% if podcast.ready_image %>